jQuery mouseleave() method

jQuery Events

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

The mouseleave event will occur when the mouse pointer is moved out of an element.

You may think that mouseleave andmouseoutevents are the same, but they are not:

• mouseleave-to call when the mouse pointer is moved out of an element

• mouseout-to call when the mouse pointer is moved out of an element or one of its child elements (see the following examples)

mouseleave() method is usually used withmouseenter()Methods used together.

Syntax:

Trigger the mouseleave event of the selected element:

$(selector).mouseleave()

Attach function to mouseleave event:

$(selector).mouseleave(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 mouseleave and mouseout:

Parameter Values

jQuery Events