jQuery Event - mouseleave() Method

jQuery Event Reference Manual

Example

Change the background color of the element when the mouse pointer leaves the element:

$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

Try it yourself

Definition and usage

The mouseleave event occurs when the mouse pointer leaves the element.

This event is most often used with mouseenter events together.

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

Note:Unlike the mouseout event, the mouseleave event is triggered only when the mouse pointer leaves the selected element. If the mouse pointer leaves any child element, the mouseout event will also be triggered. Please see the demonstration below.

Try it yourself:The difference between mouseleave and mouseout

Trigger the mouseleave event

Syntax

$(selector).mouseleave()

Try it yourself

Bind the function to the mouseleave event

Syntax

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

Try it yourself

jQuery Event Reference Manual