jQuery .mouseout() Method

Beginner
Deprecated since 3.3
7 min read
Updated: Oct 2026
5 examples
Live preview
jQuery .mouseout() method — deprecated shorthand for binding and triggering mouseout
Definition

What Is .mouseout()?

.mouseout() is jQuery’s legacy shorthand for the mouseout event (since 1.0). Pass a handler to bind; call it with no arguments to trigger. Binding forms are deprecated since 3.3 — prefer .on() / .trigger().

Remember
$("#box").mouseout(fn)               // bind (deprecated)
$("#box").mouseout({ id: 1 }, fn)    // bind + eventData (deprecated)
$("#box").mouseout()                 // trigger (prefer .trigger)

// Modern:
$("#box").on("mouseout", fn)
$("#box").trigger("mouseout")

// Nested menus? Prefer mouseleave instead.
NeedLegacyModern
Bind.mouseout(fn).on("mouseout", fn)
Pass data.mouseout(data, fn).on("mouseout", data, fn)
Trigger.mouseout().trigger("mouseout")
Nested leave.on("mouseleave", fn)
Approach

How to Use .mouseout()

Read legacy leave handlers safely, then rewrite them to the modern event API.

  1. Decide if the call is a bind (function passed) or a trigger (no args).
  2. For new work, use .on("mouseout", handler) instead of .mouseout(handler).
  3. Replace no-arg .mouseout() with .trigger("mouseout").
  4. If nesting causes flicker, switch to mouseleave / mouseenter.
PieceRequired?Role
handlerFor bindfunction(event) { … }
eventDataOptionalObject available as event.data (since 1.4.3)
No argumentsFor triggerFires mouseout on matched elements
Return—jQuery object (chainable)

Pseudocode

Pseudocode
if called with handler (and optional data):
  register handler for "mouseout"   // same as .on(...)
  // deprecated since 3.3 — prefer .on("mouseout", …)

if called with no arguments:
  fire "mouseout" on each matched element
  // prefer .trigger("mouseout")

on each leave (including Outer → Inner):
  call handler(event)  // bubbling still applies
Reference

Cheat Sheet

Keep these migration facts handy when reading older jQuery.

TopicDetail
Bind (1.0).mouseout(handler) — deprecated 3.3
Bind + data (1.4.3).mouseout(eventData, handler) — deprecated 3.3
Trigger (1.0).mouseout() → prefer .trigger("mouseout")
Bubbles?Yes — child crossings notify the parent
DelegationNot available via shorthand — use .on("mouseout", sel, fn)
StatusWorks in jQuery 3.x; avoid in new code
Try it

Live Preview

Leave the pad (legacy .mouseout(fn)) or click Trigger (no-arg .mouseout()).

Uses deprecated .mouseout() — prefer .on() / .trigger() for new code.

Result
Leave the pad or click Trigger
→ bind vs trigger (legacy shorthand)
Code

jQuery Examples

Short legacy snippets plus the modern rewrite. Open Try It Yourself to run each lab.

Example 1 — Bind with .mouseout(handler)

Log leave events with the deprecated binding shorthand — child crossings also fire.

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

// Prefer: $("#outer").on("mouseout", function () { … });
Try It Yourself

How It Works

  1. Pass a function. .mouseout(fn) registers the handler (deprecated).
  2. Leave the element. Exiting to the page runs the function.
  3. Cross into a child. Outer → Inner also fires because mouseout bubbles.
  4. Migrate. Swap to .on("mouseout", fn) — or mouseleave for nesting.

Example 2 — Pass eventData

Since 1.4.3, pass an object before the handler — available as event.data.

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

// Prefer: .on("mouseout", { action: "hide" }, fn)
Try It Yourself

How It Works

  1. First argument is data. { action: "hide" } is not the handler.
  2. Second argument is the function. It runs on each leave.
  3. Read event.data. Shared config without an extra closure.
  4. Modern form. Same pattern with .on("mouseout", data, fn).

Example 3 — Trigger with No Arguments

Call .mouseout() with no args to fire bound handlers programmatically.

jQuery
var count = 0;

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

$("#fire").on("click", function () {
  $("#outer").mouseout();  // prefer .trigger("mouseout")
});
Try It Yourself

How It Works

  1. Bind first. A handler must exist for the trigger to do anything useful.
  2. Empty call fires. .mouseout() synthesizes the event.
  3. Same handlers run. Real leaves and triggers share the callback.
  4. Prefer clarity. Write .trigger("mouseout") in new code.

Example 4 — Migrate to .on("mouseout")

Side-by-side: deprecated shorthand vs the modern binding API.

jQuery
// Legacy (deprecated)
$("#legacy").mouseout(function () {
  $("#log").text("Legacy .mouseout(fn)");
});

// Modern (preferred)
$("#modern").on("mouseout", function () {
  $("#log").text("Modern .on('mouseout', fn)");
});
Try It Yourself

How It Works

  1. Same event name. Both listen for mouseout.
  2. Behavior matches. For a simple bind, results are identical.
  3. .on() is the future. Supports delegation and one consistent API.
  4. Bubbling stays. Migration alone does not fix nested-menu flicker.

Example 5 — Legacy .mouseover() + .mouseout()

Older hover pairs often use both shorthands on flat elements.

jQuery
$(".card")
  .mouseover(function () {
    $("#log").text("mouseover → entered " + $(this).text());
  })
  .mouseout(function () {
    $("#log").text("mouseout → left " + $(this).text());
  });

// Prefer: .on("mouseover" / "mouseout")
// Nested content? Prefer mouseenter / mouseleave
Try It Yourself

How It Works

  1. Enter with mouseover. Legacy enter shorthand runs on arrival.
  2. Leave with mouseout. Legacy leave shorthand runs on exit.
  3. Flat targets. No nested children → fewer false leaves.
  4. Modern rewrite. Use .on(), or mouseenter / mouseleave for nesting.

Edge Cases & Pitfalls

Watch for these when reading or migrating .mouseout() code.

deprecated

Do not use in new projects

Binding forms are deprecated since 3.3. Prefer .on("mouseout") everywhere new.

bubble

Migration does not stop bubbling

.on("mouseout") has the same child-crossing behavior. Use mouseleave for nested menus.

overload

Bind vs trigger look alike

.mouseout(fn) binds; .mouseout() fires. Always check the arguments.

delegate

No event delegation

Shorthand cannot do .on("mouseout", ".child", fn). Use .on() for dynamic children.

pair

Legacy over/out pairs

Old code often chains .mouseover().mouseout(). Rewrite both sides to .on().

Compatibility

Browser Support

.mouseout() has shipped since jQuery 1.0 (eventData form since 1.4.3). It works wherever your jQuery build runs. Binding forms are deprecated since 3.3 but still functional in jQuery 3.x.

✓ jQuery 1.0+ · Deprecated 3.3

jQuery .mouseout()

Available in jQuery 1.x, 2.x, and 3.x across Chrome, Firefox, Safari, Edge, and other browsers with jQuery loaded.

100% With jQuery loaded
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
.mouseout() Browsers

Bottom line: Safe to encounter in legacy apps. For new code, use .on("mouseout") and .trigger("mouseout") — or mouseleave for nested UI.

Analysis

Performance Notes

ApproachCostBest for
.mouseout(fn)Same as .on()Legacy reading only
.on("mouseout", fn)Same bind cost + delegationFlat targets / migration
mouseleaveFewer leave callsMenus and nested content

Migrating shorthand to .on() does not change event frequency. Nested trees still produce extra leave calls until you switch to mouseleave.

Remember

Key Takeaways

  • Role: legacy bind-or-trigger shorthand for mouseout.
  • Status: binding forms deprecated since jQuery 3.3.
  • Migrate: .on("mouseout") + .trigger("mouseout").
  • Nesting: prefer mouseleave when children cause false leaves.

One line: recognize .mouseout() in old code — write .on("mouseout") (or mouseleave) in new code.

Frequently Asked Questions

With a handler — .mouseout(fn) or .mouseout(eventData, fn) — it binds a function that runs when the pointer leaves the element (and when moving into a child, because mouseout bubbles). With no arguments — .mouseout() — it triggers the event. Binding forms are deprecated since jQuery 3.3.
Yes. Prefer .on('mouseout', handler) for binding and .trigger('mouseout') for firing. jQuery 3.x still runs the shorthand for compatibility; migrate when you touch legacy code.
.mouseout(fn) only registers a callback. .mouseout() with no arguments fires the event on each matched element (same idea as .trigger('mouseout')). Check whether a function is passed before reading old code.
mouseout bubbles. Leaving Outer into Inner still notifies Outer. For nested menus, prefer .on('mouseleave', fn) — mouseleave ignores child crossings.
Replace .mouseout(fn) with .on('mouseout', fn). Replace .mouseout(data, fn) with .on('mouseout', data, fn). Replace no-arg .mouseout() with .trigger('mouseout'). Unbind with .off('mouseout').
Yes for backward compatibility. It still binds and triggers correctly. Do not use it in new projects — use the modern mouseout event API, or mouseleave for nested UI.

Next: mouseover event

Learn the bubbling enter event that pairs with mouseout in legacy hover code.

mouseover tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

jQuery mouseout Event jQuery mouseover Event