jQuery mouseout Event

What You’ll Learn

The mouseout event fires when the mouse pointer leaves an element. This tutorial covers binding with .on("mouseout"), triggering with .trigger("mouseout"), understanding bubbling and event.relatedTarget, comparing mouseout with mouseleave, and when to prefer mouseleave for nested menus.

Introduction

Every hover interaction has an exit — dropdowns close, tooltips disappear, and highlight classes are removed when the pointer leaves. jQuery’s mouseout event is the classic way to run JavaScript at that moment, but its bubbling behavior can surprise developers working with nested elements.

The official jQuery API distinguishes the mouseout event (bound with .on("mouseout") since 1.7) from the deprecated .mouseout() method used in older code. Unlike mouseleave, mouseout bubbles — it fires when leaving the bound element or when moving from the parent into a child inside it. To programmatically fire a handler, use .trigger("mouseout") — available since jQuery 1.0.

Understanding the mouseout Event

The mouseout event is sent to an element when the mouse pointer leaves that element. Because it bubbles, moving from a parent into a child inside the bound element also triggers mouseout on the parent — the event trickles up the DOM tree just like a physical exit.

This bubbling behavior causes headaches with nested menus and tooltips. When the pointer moves from a menu item into its submenu, mouseout fires on the parent container — making it look like the user left the menu entirely. For nested content, jQuery recommends mouseleave paired with mouseenter instead. If you must use mouseout, inspect event.relatedTarget to filter false positives.

📝 Syntax

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

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

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

• eventData — optional object passed to the handler as event.data.
• handler — function called each time mouseout fires: function( event ) { ... }. Use event.relatedTarget to detect where the pointer moved.

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

$( "#menu" ).on( "mouseout", "li", function( event ) {
  // runs when pointer leaves any li inside #menu — bubbles from children
} );

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

.trigger( "mouseout" )

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

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

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

Official jQuery API examples

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

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

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 event.relatedTarget filtering and the legacy mouseover + mouseout hover pair. Use the Try-it links to run each snippet in the browser.

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

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

Moving from Outer into Inner child → handler ALSO fires (bubbles)

mouseout fires when leaving element OR crossing into a child

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

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

Leave #outer → log message appended

Click #other → $("#outer").trigger("mouseout") → 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

$( "#outer" ).on( "mouseout", function( event ) {
  if ( $( event.relatedTarget ).closest( "#outer" ).length ) {
    return; // pointer moved to a child — still inside #outer
  }
  $( "#log" ).append( " Left #outer entirely." );
} );

Move from Outer into Inner → relatedTarget is inside #outer → handler returns early

Leave #outer entirely → relatedTarget is outside → log appends "Left #outer entirely."

Filters bubbling false positives on nested content

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

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

Leave the card → .highlight removed (mouseout)

Nested caveat: moving between child elements inside a card re-fires mouseout/mouseover — use mouseenter/mouseleave or relatedTarget filter instead

🚀 Common Use Cases

• Legacy hover pairs — maintain existing mouseover / mouseout code on flat elements without nested children.
• Filter with relatedTarget — ignore child-boundary crossings when refactoring away from mouseout is not yet possible.
• Remove row highlight — $("tr").on("mouseout", fn) on table rows with no nested interactive elements.
• Hide flat tooltips — dismiss a tooltip when leaving a trigger that has no nested content inside it.
• Event delegation — $("#list").on("mouseout", "li", fn) when list items have no nested children.
• Programmatic testing — $("#box").trigger("mouseout") to verify hide logic in unit tests.

📝 Notes

• Bind with .on("mouseout", handler) since jQuery 1.7 — not the deprecated .mouseout(handler) method.
• Trigger with .trigger("mouseout") since jQuery 1.0.
• mouseout bubbles — unlike mouseleave, it fires when moving from parent into a child.
• Use event.relatedTarget to filter false positives when the pointer moves to a child still inside the bound element.
• For nested menus and tooltips, prefer mouseenter + mouseleave over mouseover + mouseout.
• Any HTML element can receive mouseout — not limited to links or buttons.
• Use .off("mouseout") to remove handlers — avoid deprecated .unbind("mouseout").
• Touch devices have no true hover — provide click/tap fallbacks for critical UI.

💡 Best Practices