jQuery mouseenter() method

jQuery Events

The mouseenter() method triggers the mouseenter event, or attach a function to be executed when the mouseenter event occurs.

A mouseenter event occurs when the mouse pointer enters the element.

You might think that mouseenter,mousemoveandmouseoverThe events are the same, but they are not:

• mouseenter-Called only when the mouse pointer enters the element

• mousemove-Called when the mouse pointer is moved onto the element

• mouseover-Called when the mouse pointer enters the element and its child elements (see the following example for details)

The mouseenter() method is usually used withmouseleave()Methods used together.

Syntax:

Trigger the mouseenter event of the selected element:

$(selector).mouseenter()

Attach function to mouseenter event:

$(selector).mouseenter(function)

Instance

Change background color when mouseenter and mouseleave events are triggered:

$("p").mouseenter(function(){
　　$(this).css("background-color", "yellow");
});
$("p").mouseleave(function(){
　　$(this).css("background-color", "lightblue");
});

This example demonstrates the difference between mousemove, mouseenter, and mouseover:

Parameter Value

jQuery Events