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