jQuery .mouseout() Method

What You’ll Learn

The .mouseout() method is jQuery’s legacy shorthand for binding and triggering the mouseout event. This tutorial covers .mouseout(handler) since 1.0, .mouseout(eventData, handler) since 1.4.3, no-argument .mouseout() as a trigger, migration to .on("mouseout") and .trigger("mouseout"), and why the binding form is deprecated since jQuery 3.3. Because mouseout bubbles, handlers also fire when moving into nested children — for nested menus, prefer mouseleave. For the modern mouseout event API, see the jQuery mouseout event tutorial.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .click(), .mouseout(), .keydown(), and dozens more. The .mouseout() method let you bind a hover-exit handler in one short call: $("#menu").mouseout(function(){ ... }). It remains in jQuery 3.x for backward compatibility but is marked deprecated.

Understanding .mouseout() matters when reading older card hover effects, tooltip plugins, and legacy tutorials. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Unlike mouseleave, the mouseout event bubbles — a handler on #outer fires when the pointer moves into an inner child, not only when leaving the outer boundary entirely. Modern jQuery splits binding and triggering explicitly — .on("mouseout", handler) for binding and .trigger("mouseout") for firing. This page documents the shorthand API and shows how to migrate.

Understanding the .mouseout() Method

The official jQuery API describes .mouseout() as a way to bind an event handler to the mouseout event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched element and calls it when the pointer leaves that element — including when the pointer moves from the element into a nested child inside it, because mouseout bubbles.

When you call .mouseout() with no arguments, jQuery synthetically fires the mouseout event on each matched element. Bound handlers run immediately. This trigger behavior is equivalent to .trigger("mouseout").

📝 Syntax

The .mouseout() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("mouseout") is preferred:

1. Bind a handler — .mouseout( handler ) (since 1.0, deprecated 3.3)

.mouseout( handler )

• handler — function executed each time mouseout fires: function( event ) { ... }. Use event.relatedTarget to filter child-boundary crossings.
• Returns the jQuery object for chaining.
• Modern replacement: .on( "mouseout", handler ).

2. Bind with eventData — .mouseout( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.mouseout( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "mouseout", eventData, handler ).

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

.mouseout()

• No arguments — triggers mouseout on every matched element.
• Runs bound mouseout handlers.
• Preferred replacement: .trigger( "mouseout" ).

Official jQuery API migration note

// Deprecated binding
$( "#outer" ).mouseout( function() {
  $( "#log" ).append( " Handler for `mouseout` called. " );
} );

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

// Deprecated trigger
$( "#outer" ).mouseout();

// Modern trigger
$( "#outer" ).trigger( "mouseout" );

Return value

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

Examples Gallery

Five examples cover binding, eventData, triggering, migration from .mouseout() to .on("mouseout"), and the legacy .mouseover() + .mouseout() hover pair. Use the Try-it links to run each snippet in the browser. Remember: binding with .mouseout(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

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

Pointer leaves #outer entirely → log appends handler message

Moving into Inner child inside #outer → handler ALSO fires (bubbles)

For nested menus prefer .on("mouseleave", fn) — deprecated .mouseout(fn) for new code

$( ".tooltip" ).mouseout( { action: "hide" }, function( event ) {
  var id = $( this ).data( "id" );
  $( "#log" ).text(
    "Hide: " + id + " | eventData.action: " + event.data.action
  );
} );

Leave Help A → "Hide: help-a | eventData.action: hide"

Leave Help B → "Hide: help-b | eventData.action: hide"

Same handler, shared eventData on every .tooltip trigger

var count = 0;

$( "#outer" ).mouseout( function() {
  count++;
  $( "#log" ).text( "Outer handler fired (count: " + count + ")" );
} );

$( "#fire" ).click( function() {
  $( "#outer" ).mouseout();
} );

Leave #outer directly → count increments

Click #fire → $("#outer").mouseout() → same handler runs

No-arg .mouseout() is trigger shorthand — prefer .trigger("mouseout")

$( "#legacy" ).mouseout( function() {
  $( "#log" ).text( "Legacy: .mouseout(function(){ ... }) — deprecated since jQuery 3.3." );
} );

$( "#modern" ).on( "mouseout", function() {
  $( "#log" ).text( "Modern: .on('mouseout', function(){ ... }) — use this for new code." );
} );

Leave #legacy → legacy deprecation message

Leave #modern → modern .on("mouseout") message

Behavior is identical — only the API name differs

$( ".card" )
  .mouseover( function() {
    $( this ).addClass( "highlight" );
  } )
  .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

• Reading legacy code — recognize $("#card").mouseout(fn) as equivalent to .on("mouseout", fn) in older hover plugins.
• Legacy hover pairs — maintain existing .mouseover() / .mouseout() code on flat elements without nested children.
• Proxy triggers — $("#btn").click(function(){ $("#panel").mouseout(); }) — replace inner no-arg .mouseout() with .trigger("mouseout").
• Shared eventData — $(".tip").mouseout({ action: "hide" }, fn) passes metadata without closures.
• Flat row highlight — $("tr").mouseout(fn) on table rows with no nested interactive elements.
• Automated testing — test suites may call .mouseout() to simulate exit — consider .trigger("mouseout") for explicit intent.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .mouseout(handler) or .mouseout(eventData, handler) in new code. Use .on("mouseout") instead.
• Bind with .mouseout(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .mouseout() triggers the event since jQuery 1.0 — prefer .trigger("mouseout").
• mouseout bubbles — handlers fire when moving from a parent into a child inside the bound element. For nested menus, prefer mouseleave.
• .mouseout() does not support event delegation — use .on("mouseout", selector, fn) for dynamic lists.
• Filter false positives with event.relatedTarget — see the modern mouseout event tutorial.
• Remove handlers with .off("mouseout") — not by calling .mouseout(undefined).
• Legacy code using .mouseout() still runs in jQuery 3.x — migrate when you refactor those files.

💡 Best Practices