jQuery Event - mouseenter() Method

Example

Change the background color of the element when the mouse pointer enters (passes through) the element:

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

Try it yourself

Definition and usage

The mouseenter event occurs when the mouse pointer passes through the element.

This event is often used with mouseleave events together.

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

Note:Unlike the mouseover event, the mouseenter event is triggered only when the mouse pointer passes through the selected element. If the mouse pointer passes through any child element, the mouseover event will also be triggered. Please see the demonstration in the following example.

Try it yourself:The difference between mouseenter and mouseover

Trigger the mouseenter event

Syntax

$(selector).mouseenter()

Try it yourself

Bind the function to the mouseenter event

Syntax

$(selector).mouseenter(function)
Parameters Description
function Optional. Specifies the function to be executed when the mouseenter event occurs.

Try it yourself