jQuery mouseout() Method
jQuery mouseout() event occurs when a mouse pointer is leaves any child elements as well as the selected element. The jQuery mouseout method triggers the mouseout event, and when mouseout event occurs specified function will execute.
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 mouseout() method
$(selector).mouseout(); // This syntax does not accept any arguments.
and this syntax represent to attach a function to the mouseout event
$(selector).mouseout(function);
| Parameter | Type | Description |
|---|---|---|
| function | Function | Optional. Specifies the function to execute when the mouseout is occurs |
Examples
This example represent the mouseout event
$(document).ready(function(){
$("div").mouseover(function(){
$("input").css("background-color", "yellow");
});
$("div").mouseout(function(){
$("input").css("background-color", "pink");
});
$("#btn1").click(function(){
$("div").mouseover();
});
$("#btn2").click(function(){
$("div").mouseout();
});
});
This example represent to attach a function to the mouseout event.
$(document).ready(function(){
$("div").mouseover(function(){
$("input").css("background-color", "yellow");
});
$("div").mouseout(function(){
$("input").css("background-color", "pink");
});
});