jQuery Tutorial Tutorials - jQuery .mouseout() method

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

When the mouse pointer leaves the element(including child elements), the event mouseout is fired.

jQuery .mouseout() method Syntax

.mouseout()
.mouseout(handler)
.mouseout(eventData,handler)

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

• mouseout is relative to mouseover

jQuery .mouseout() method Example

example

Trigger the mouseout event on target:
HTML

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

jQuery

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

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

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

Try now

jQuery .mouseout() VS .mouseleave()

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

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

Try now