jQuery mouseover Event

What Is mouseover?

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

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

bubbles: parent → fires when entering OR crossing into a child
mouseenter: fires only when entering from outside

event.relatedTarget → element the pointer came from
.trigger("mouseover") → run handlers manually

How to Use mouseover

Bind an enter handler, account for bubbling, and prefer mouseenter when nesting matters.

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

Pseudocode

on mouseover of #outer:
  from = event.relatedTarget   // where the pointer came from

  // Bubbling case: Outer → Inner still fires mouseover on Outer
  if from is still inside #outer:
    optionally ignore  // or use mouseenter instead
  else:
    run enter logic (show menu, add class, …)

Cheat Sheet

Keep these facts handy when handling pointer enter.

Live Preview

Move between Outer and Inner. Watch how often mouseover fires compared with mouseenter.

mouseover count: 0
mouseenter 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("mouseover", function () {
  $("#log").append("Handler for mouseover called.\n");
});

Enter Outer → Handler for mouseover called.
Outer → Inner → Handler for mouseover called.

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

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

Enter Outer → Handler for mouseover called.
Click button → Handler for mouseover called.

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

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

Move page → Outer → Inner:
mouseover count rises several times
mouseenter count rises once (true entry)

$("#outer").on("mouseover", function (event) {
  if (event.relatedTarget && $(event.relatedTarget).closest("#outer").length) {
    return; // still inside #outer
  }
  $("#log").append("Entered #outer from outside.\n");
});

Enter Outer from page → Entered #outer from outside.
Outer → Inner → (ignored)

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

// Nested content? Prefer mouseenter / mouseleave instead.

mouseover → entered Card A
mouseout → left Card A

Performance Notes

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

Key Takeaways