jQuery Tutorial Tutorials - jQuery .mouseenter() method

The .mouseenter() method in jQuery is used to run a function when the mouse pointer enters an elements, or trigger the mouseenter event on an element.

When the mouse pointer enters the element, the event mouseenter is fired.

jQuery .mouseenter() method Syntax

.mouseenter()
.mouseenter(handler)
.mouseenter(eventData,handler)

.mouseenter(handler) and .mouseenter(eventData,handler) are shortcut for .on( "mouseenter", handler )
.mouseenter() is shortcut for .trigger( "mouseenter" )

• mouseenter is relative to mouseleave

jQuery .mouseenter() method Example

example

Trigger the mouseenter event on target:
HTML

<div id="target">target</div>
<div id="btn">
  Trigger mouseenter event on target
</div>

jQuery

$( "#target" ).mouseenter(function() {
    console.log( "mouseenter." );
});

$("#btn").click(function(){
    $( "#target" ).mouseenter();
}

jQuery .mouseenter([eventData,]handler) method Example

example

Following is a simple example which change the element's background color when the mouse pointer enters or leaves the element.

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

Try now

jQuery .mouseenter() VS .mouseover()

The difference between .mouseenter() and .mouseover() is:

• mouseover fires when the pointer moves into the child element as well.(the mouse pointer is over the element).
• mouseenter fires only when the pointer enters the bound element.

Try now