jQuery Event mouseleave() Method

The jQuery event mouseleave() method is used to attach an event handler to the mouseleave event, or to trigger that event on the selected element. It occurs when the mouse pointer leaves the selected element.

Syntax

Following is the syntax of the jQuery event mouseleave() method −

$(selector).mouseleave(function)

Parameters

This method accepts an optional parameter as a function, which is described below −

function − An optional function to execute when the mouseleave event triggers.

Return Value

This method does not have any return value.

Example 1

The following program demonstrates the usage of the jQuery event mouseleave() method −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 300px;
        padding: 20px;
        color: white;
        background-color: green;
        text-align: center;
    }
</style>
</head>
<body>
    <div>Enter mouse pointer on me and leave</div>
    <script>
        $('div').mouseleave(function(){
            alert("Mouse pointer leaves the div element");
        });
    </script>
</body>
</html>

Output

After executing the above code, a box with a green background is displayed. When the mouse pointer leaves that box (i.e., the div element), a pop-up alert will appear on the browser screen −

Example 2

Let's see another scenario of the jQuery event mouseleave() method. Here, we are changing the input field background based on given conditions −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    input{
        width: 200px;
        padding: 10px;
    }
</style>
</head>
<body>
    <p>Enter input to check whether it satisfies the given condition or not</p>
    <input type="text" placeholder="Enter your name....">
    <script>
        $('input').mouseleave(function(){
            $value = $('input').val();
            if($value.length < 5){
                $(this).css({"background-color": "red", "color": "white"});
            }
            else{
                $(this).css({"background-color": "green", "color": "white"});
            }
        });
    </script>
</body>
</html>

Output

The program displays an input field; when the user leaves the input field, the background changes to red. If the entered value’s length is greater than 5, the background changes to green −

Example 3

In the example below, we combine the mouseleave() and mouseenter() methods to toggle the styles of the textarea field −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    textarea{
        padding: 20px;
    }
</style>
</head>
<body>
    <p>Write your feedback...</p>
    <textarea name="" id="" cols="30" rows="10"></textarea>
   <script>
    $('textarea').mouseenter(function(){
        $(this).css({"width": "300px", "color": "white", "background-color": "green", "transition": "1s"});
    }).mouseleave(function(){
        $(this).css({"width": "200px", "color": "black", "background-color": "lightblue", "transition": "1s"});
    });
   </script>
</body>
</html>

Output

Once the program is executed, it displays a textarea field. When a user enters or leaves this field, the width, color, and background color of the textarea field will change accordingly −

jquery_ref_events.htm

Print Page