Home >>jQuery Tutorial >jQuery mouseleave() Method

jQuery mouseleave() Method

jQuery mouseleave() Method

jQuery mouseleave() method in jQuery is used to add a function or triggers the mouseleave event to run, when a mouse pointer leaves the selected elements.

Syntax:

Trigger the mouseleave event for the selected elements:

$(selector).mouseleave()

Attach a function to the mouseleave event:

$(selector).mouseleave(function) 

Parameter Values

Parameter Description
function It is an optional parameter and is used to specifies the function to run when the this event is triggered
Here is an Example of jQuery mouseleave() Method:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".txt").mouseenter(function(){
$(".txt").css("background-color", "orange");
});
$(".txt").mouseleave(function(){
$(".txt").css("background-color", "lightgreen");
});
});
</script>
</head>
<body>
<p class="txt">Move the mouse pointer over me !</p>
</body>
</html>

Output:

Move the mouse pointer over me !