jQuery mouseenter Event — Enter Without Child Bubbling

What Is the mouseenter Event?

mouseenter fires when the pointer enters the element it is bound to. Moving into a child does not fire it again (unlike mouseover). Bind with .on("mouseenter", handler) (jQuery 1.7+).

$("#outer").on("mouseenter", function () { ... })
$("#outer").trigger("mouseenter")

// Enter element → fires once
// Enter a child inside it → does NOT fire again
// Prefer on/trigger — not the deprecated .mouseenter()

How to Use mouseenter

Select the container, bind enter (and usually leave), avoid mouseover when children would spam handlers.

1. Select the element(s): $("#outer"), $(".card"), etc.
2. Bind: .on("mouseenter", function (event) { ... }).
3. Pair with .on("mouseleave", …) for hover-style UI.
4. To fire in code: .trigger("mouseenter"). Unbind with .off("mouseenter").

Pseudocode

function onMouseenter(element, handler):
    when pointer moves from outside element → inside element:
        handler(event)
    // moving into a child of element does NOT call handler again

trigger(element, "mouseenter"):
    run all mouseenter handlers on element

Cheat Sheet

Keep these facts handy when choosing enter vs over.

Live Preview

Run presets that use .on("mouseenter") and .trigger("mouseenter").

Handler for mouseenter called.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

$("#outer").on("mouseenter", function () {
  console.log("Handler for mouseenter called.");
});

Handler for mouseenter called.

$("#outer").on("mouseenter", function () {
  console.log("Handler for mouseenter called.");
});

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

Handler for mouseenter called.

var enterCount = 0;
var overCount = 0;

$("#enterBox").on("mouseenter", function () {
  enterCount += 1;
  console.log("mouseenter:", enterCount);
});

$("#overBox").on("mouseover", function () {
  overCount += 1;
  console.log("mouseover:", overCount);
});
// Move into each box, then into its Inner child:
// mouseenter stays 1; mouseover increases again.

mouseenter: 1
mouseover: 1
mouseover: 2

$("#card")
  .on("mouseenter", function () {
    console.log("mouse enter");
  })
  .on("mouseleave", function () {
    console.log("mouse leave");
  });

mouse enter
mouse leave

Performance Notes

Prefer mouseenter / mouseleave for UI hover — fewer accidental re-entries means less work and cleaner state.

Key Takeaways