jQuery mouseleave Event

What You’ll Learn

The mouseleave event fires when the mouse pointer leaves an element. This tutorial covers binding with .on("mouseleave"), triggering with .trigger("mouseleave"), comparing mouseleave with mouseout, pairing with mouseenter, and hiding menus and tooltips when the pointer exits.

Introduction

Every hover interaction has an exit — dropdowns close, tooltips disappear, and highlight classes are removed when the pointer leaves. jQuery’s mouseleave event is the reliable way to run JavaScript at that moment, especially on elements that contain nested children.

The official jQuery API distinguishes the mouseleave event (bound with .on("mouseleave") since 1.7) from the deprecated .mouseleave() method used in older code. jQuery simulates mouseleave in every browser — the event was originally proprietary to Internet Explorer. To programmatically fire a handler, use .trigger("mouseleave") — available since jQuery 1.0.

Understanding the mouseleave Event

The mouseleave event is sent to an element when the mouse pointer leaves that element entirely. Unlike mouseout, it does not fire when the pointer moves from the parent into a child element inside the bound element — the handler runs only when exiting the outer boundary.

This non-bubbling behavior is why dropdown menus and tooltips prefer mouseleave paired with mouseenter. With mouseout, moving from a menu item into its submenu looks like leaving the parent — causing the menu to collapse before the user can click a submenu link.

📝 Syntax

The modern jQuery API for the mouseleave event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("mouseleave" [, eventData ], handler) (since 1.7)

.on( "mouseleave" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data.
• handler — function called each time mouseleave fires: function( event ) { ... }.

2. Event delegation — .on("mouseleave", selector, handler)

$( "#menu" ).on( "mouseleave", "li", function( event ) {
  // runs when pointer leaves any li inside #menu
} );

3. Trigger the event — .trigger("mouseleave") (since 1.0)

.trigger( "mouseleave" )

• Runs bound mouseleave handlers on the matched element(s).
• Use .triggerHandler("mouseleave") to run handlers without bubbling.

4. Unbind — .off("mouseleave" [, selector] [, handler])

$( "#outer" ).off( "mouseleave" );              // remove all mouseleave handlers
$( "#menu" ).off( "mouseleave", "li", fn );     // remove delegated handler

Official jQuery API examples

$( "#outer" ).on( "mouseleave", function() {
  $( "#log" ).append( " Handler for `mouseleave` called. " );
} );

$( "#other" ).on( "click", function() {
  $( "#outer" ).trigger( "mouseleave" );
} );

Return value

• .on() and .trigger() return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Examples 4–5 cover hiding UI on leave and the full enter/leave pair. Use the Try-it links to run each snippet in the browser.

$( "#outer" ).on( "mouseleave", function() {
  $( "#log" ).append( " Handler for `mouseleave` called. " );
} );

Pointer leaves #outer entirely → #log appends: "Handler for mouseleave called."

Moving from Outer into Inner child → handler does NOT fire

mouseleave fires only when exiting the bound element

$( "#outer" ).on( "mouseleave", function() {
  $( "#log" ).append( " Handler for `mouseleave` called. " );
} );

$( "#other" ).on( "click", function() {
  $( "#outer" ).trigger( "mouseleave" );
} );

Leave #outer → log message appended

Click #other → $("#outer").trigger("mouseleave") → same log message


Programmatic trigger invokes bound handlers

var i = 0;
$( "div.overout" )
  .on( "mouseover", function() {
    $( "p", this ).first().text( "mouse over" );
  } )
  .on( "mouseout", function() {
    $( "p", this ).first().text( "mouse out" );
    $( "p", this ).last().text( ++i );
  } );

var n = 0;
$( "div.enterleave" )
  .on( "mouseenter", function() {
    $( "p", this ).first().text( "mouse enter" );
  } )
  .on( "mouseleave", function() {
    $( "p", this ).first().text( "mouse leave" );
    $( "p", this ).last().text( ++n );
  } );

Left box (mouseout): leave counter increments when exiting outer AND inner child

Right box (mouseleave): leave counter increments only when exiting outer boundary

Move between outer and inner on left → count jumps; on right → stable

$( "#nav-item" )
  .on( "mouseenter", function() {
    $( "#submenu" ).show();
  } )
  .on( "mouseleave", function() {
    $( "#submenu" ).hide();
  } );

Enter #nav-item → #submenu shows

Move into submenu links inside #nav-item → submenu stays open

Leave #nav-item entirely → mouseleave hides #submenu

$( ".card" )
  .on( "mouseenter", function() {
    $( this ).addClass( "highlight" );
  } )
  .on( "mouseleave", function() {
    $( this ).removeClass( "highlight" );
  } );

Enter a .card → .highlight class added (mouseenter)

Leave the card → .highlight removed (mouseleave)

Each card toggles independently — complete hover pair

🚀 Common Use Cases

• Close dropdowns — $("#nav-item").on("mouseleave", function(){ $("#submenu").hide(); }).
• Dismiss tooltips — hide the tooltip panel when the pointer leaves the trigger element.
• Remove row highlight — $("tr").on("mouseleave", fn) to reset table row styling.
• Stop hover timers — clear a delayed-show timeout if the user leaves before it fires.
• Pause previews — stop video or AJAX preview when the pointer exits the thumbnail.
• Keyboard fallbacks — $("#btn").on("blur", function(){ ... }).trigger("mouseleave") for accessibility parity.

📝 Notes

• Bind with .on("mouseleave", handler) since jQuery 1.7 — not the deprecated .mouseleave(handler) method.
• Trigger with .trigger("mouseleave") since jQuery 1.0.
• jQuery simulates mouseleave in all browsers — it was originally an IE proprietary event.
• mouseleave does not fire when moving from parent into a child — unlike mouseout.
• Always pair with mouseenter for complete hover behavior — not mouseover / mouseout.
• Any HTML element can receive mouseleave — not limited to links or buttons.
• Use .off("mouseleave") to remove handlers — avoid deprecated .unbind("mouseleave").
• Touch devices have no true hover — provide click/tap fallbacks for critical UI.

💡 Best Practices