FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

jQuery mouseleave() Method

jQuery Event Methods jQuery Event Methods

Example

Set the background color to gray, when the mouse pointer leaves a <p> element:

$("p").mouseleave(function(){
    $("p").css("background-color", "gray");
});
Try it Yourself »

Definition and Usage

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

The mouseleave() method triggers the mouseleave event, or attaches a function to run when a mouseleave event occurs.

Note: Unlike the mouseout event, the mouseleave event only triggers when the mouse pointer leaves the selected elements. The mouseout event is triggered if a mouse pointer leaves any child elements as well as the selected element.  See the example at the end of the page for a demonstration.

Tip: This event is often used together with the mouseenter event.


Syntax

Trigger the mouseleave event for the selected elements:

$(selector).mouseleave() Try it

Attach a function to the mouseleave event:

$(selector).mouseleave(function) Try it

Parameter Description
function Optional. Specifies the function to run when the mouseleave event is triggered

Examples

Try it Yourself - Examples

The difference between mouseleave() and mouseout()
Demonstrates the difference between mouseleave() and mouseout().


jQuery Event Methods jQuery Event Methods