jQuery Tutorial Tutorials - jQuery .mouseleave() method

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

When the mouse pointer leaves the element, the event mouseleave is fired.

jQuery .mouseleave() method Syntax

.mouseleave()
.mouseleave(handler)
.mouseleave(eventData,handler)

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

• mouseleave is relative to mouseenter

jQuery .mouseleave() method Example

example

Trigger the mouseleave event on target:
HTML

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

jQuery

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

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

jQuery .mouseleave([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").mouseleave(function(){
    $(this).css("background-color","cyan");
});

Try now

jQuery .mouseleave() VS .mouseover()

The difference between .mouseleave() and .mouseout() is:

• mouseout fires when the pointer moves out the child element as well.
• mouseleave fires only when the pointer moves out of the bound element.

Try now