mouseleave()

The mouseleave() method adds an event handler function to an HTML element. This function is executed, when the mouse pointer leaves the HTML element.

When your mouse cursor leaves the selected element, it triggers the mouseleave event and once the mouseleave event is occurred, it executes the mouseleave() method attached with the event handler function to run.

This event is generally used together with mouseenter() event.

Syntax:

snippet

$(selector).mouseleave()

It triggers the mouseleave event for selected elements.

snippet

$(selector).mouseleave(function)

It adds a function to the mouseleave event.

Parameters of jQuery mouseleave() event

Parameter	Description
Function	It is an optional parameter. It executes itself when the mouseleave event is triggered.

Example of jQuery mouseleave() event

Let's take an example to demonstrate jQuery mouseleave() event.

snippet

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#h1").mouseleave(function(){  
       $( "div" ).text( "Bye Bye... leaving heading" ).show().fadeOut( 2000 ); 
    });  
});  
</script>  
</head>  
<body>  
<h1 id="h1">Enter this heading.</h1> 
<div></div> 
</body>  
</html>

Output:

Enter this heading.

jQuery mouseleave() event example 2

Let's see another example of jQuery mouseleave() event.

snippet

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $("p").css("background-color", "red");
    });
    $("p").mouseleave(function(){
        $("p").css("background-color", "blue");
    });
});
</script>
</head>
<body>
<p>Move your mouse cursor over this statement.</p>
</body>
</html>

Output:

Move your mouse cursor over this statement.