jQuery mouseleave() Method
jQuery mouseleave() event occurs when a mouse pointer is leaves the selected element. The jQuery mouseleave method triggers the mouseleave event, and when the event occurs specified function will execute.
This method is usually used together with the mouseenter() method.
Difference between mouseleave() and mouseout() event
jQuery mouseleave() event only triggers when a mouse pointer is leaves the selected element. Whereas mouseout() event is triggers when a mouse pointer is leaves the selected element as well as any child elements inside it.
Syntax
This syntax represent to the mouseleave() method
$(selector).mouseleave(); // This syntax does not accept any arguments.
and this syntax represent to attach a function to the mouseleave event
$(selector).mouseleave(function);
| Parameter | Type | Description |
|---|---|---|
| function | Function | Optional. Specifies the function to execute when the mouseleave is occurs |
Examples
This example represent the mouseleave event
$(document).ready(function(){
$("input").mouseenter(function(){
$("input").css("background-color", "yellow");
});
$("input").mouseleave(function(){
$("input").css("background-color", "pink");
});
$("#btn1").click(function(){
$("input").mouseenter();
});
$("#btn2").click(function(){
$("input").mouseleave();
});
});
This example represent to attach a function to the mouseleave event.
$(document).ready(function(){
$("input").mouseenter(function(){
$("input").css("background-color", "yellow");
});
$("input").mouseleave(function(){
$("input").css("background-color", "pink");
});
});