jQuery mouseout Event

What Is mouseout?

The mouseout event fires when the pointer leaves an element (bound with .on("mouseout") since jQuery 1.7). It bubbles — leaving a child also notifies the parent. Pair historically with mouseover; for nested UI prefer mouseleave / mouseenter.

$("#outer").on("mouseout", function (event) { … })

bubbles: parent → fires when leaving OR entering a child
mouseleave: fires only when exiting the element entirely

event.relatedTarget → element the pointer moved to
.trigger("mouseout") → run handlers manually

How to Use mouseout

Bind a leave handler, account for bubbling, and prefer mouseleave when nesting matters.

1. Select the element that should react when the pointer leaves.
2. Bind with .on("mouseout", handler).
3. If children exist, check event.relatedTarget — or switch to mouseleave.
4. Unbind with .off("mouseout") when the feature is done.

Pseudocode

on mouseout of #outer:
  to = event.relatedTarget   // where the pointer went

  // Bubbling case: Outer → Inner still fires mouseout on Outer
  if to is still inside #outer:
    optionally ignore  // or use mouseleave instead
  else:
    run leave logic (hide menu, remove class, …)

Cheat Sheet

Keep these facts handy when handling pointer leave.

Live Preview

Move between Outer and Inner. Watch how often mouseout fires compared with mouseleave.

mouseout count: 0
mouseleave count: 0

Move in/out of Outer and Inner

jQuery Examples

Short, copy-ready snippets. Open each Try It Yourself lab for a live editor.

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

Leave Outer → Handler for mouseout called.
Outer → Inner → Handler for mouseout called.

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

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

Leave Outer → Handler for mouseout called.
Click button → Handler for mouseout called.

var i = 0;
$(".overout").on("mouseout", function () {
  $("span", this).text(++i);
});

var n = 0;
$(".enterleave").on("mouseleave", function () {
  $("span", this).text(++n);
});

Move Outer → Inner → Inner → page:
mouseout count rises several times
mouseleave count rises once (true exit)

$("#outer").on("mouseout", function (event) {
  if ($(event.relatedTarget).closest("#outer").length) {
    return; // still inside #outer
  }
  $("#log").append("Left #outer entirely.\n");
});

Outer → Inner → (ignored)
Leave Outer to page → Left #outer entirely.

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

// Nested content? Prefer mouseenter / mouseleave instead.

Enter card → highlight added
Leave card → highlight removed

Performance Notes

Bubbling leave events are not “slow” by themselves — but extra handler runs (class toggles, DOM writes) add up. Prefer mouseleave when nesting is deep.

Key Takeaways