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