jQuery mouseenter Event

What You’ll Learn

The mouseenter event fires when the mouse pointer enters an element. This tutorial covers binding with .on("mouseenter"), triggering with .trigger("mouseenter"), comparing mouseenter with mouseover, pairing with mouseleave, and building stable hover menus without flicker.

Introduction

Hover effects are everywhere — dropdown menus, image previews, and highlighted table rows all react when the pointer enters an element. jQuery’s mouseenter event is the reliable way to run JavaScript when that happens, especially on elements that contain nested children.

The official jQuery API distinguishes the mouseenter event (bound with .on("mouseenter") since 1.7) from the deprecated .mouseenter() method used in older code. jQuery simulates mouseenter in every browser — the event was originally proprietary to Internet Explorer. To programmatically fire a handler, use .trigger("mouseenter") — available since jQuery 1.0.

Understanding the mouseenter Event

The mouseenter event is sent to an element when the mouse pointer enters that element. Unlike mouseover, it does not re-fire when the pointer moves over child elements inside the bound element — the handler runs once when entering the outer boundary and stays quiet while moving among children.

This non-bubbling behavior is why hover menus and tooltips prefer mouseenter paired with mouseleave. With mouseover, moving from a parent into a child looks like leaving and re-entering — causing flicker, duplicate AJAX calls, and menus that collapse unexpectedly.

📝 Syntax

The modern jQuery API for the mouseenter event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("mouseenter" [, eventData ], handler) (since 1.7)

.on( "mouseenter" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data.
• handler — function called each time mouseenter fires: function( event ) { ... }.

2. Event delegation — .on("mouseenter", selector, handler)

$( "#menu" ).on( "mouseenter", "li", function( event ) {
  // runs when pointer enters any li inside #menu
} );

3. Trigger the event — .trigger("mouseenter") (since 1.0)

.trigger( "mouseenter" )

• Runs bound mouseenter handlers on the matched element(s).
• Use .triggerHandler("mouseenter") to run handlers without bubbling.

4. Unbind — .off("mouseenter" [, selector] [, handler])

$( "#outer" ).off( "mouseenter" );              // remove all mouseenter handlers
$( "#menu" ).off( "mouseenter", "li", fn );     // remove delegated handler

Official jQuery API examples

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

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

Return value

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

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Examples 4–5 cover highlight toggling and event delegation. Use the Try-it links to run each snippet in the browser.

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

Pointer enters #outer → #log appends: "Handler for mouseenter called."

Moving over Inner child inside #outer → handler does NOT fire again


mouseenter fires once per entry into the bound element

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

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

Move into #outer → log message appended

Click #other → $("#outer").trigger("mouseenter") → same log message


Programmatic trigger invokes bound handlers

var i = 0;
$( "div.overout" )
  .on( "mouseover", function() {
    $( "p", this ).first().text( "mouse over" );
    $( "p", this ).last().text( ++i );
  } )
  .on( "mouseout", function() {
    $( "p", this ).first().text( "mouse out" );
  } );

var n = 0;
$( "div.enterleave" )
  .on( "mouseenter", function() {
    $( "p", this ).first().text( "mouse enter" );
    $( "p", this ).last().text( ++n );
  } )
  .on( "mouseleave", function() {
    $( "p", this ).first().text( "mouse leave" );
  } );

Left box (mouseover): counter increments when entering outer AND inner child

Right box (mouseenter): counter increments only when entering outer boundary

Move between outer and inner on left → count jumps; on right → stable

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

Enter a .card → .highlight class added

Leave the card → .highlight removed

Each card toggles independently — $(this) is the hovered card

$( "#menu" ).on( "mouseenter", "li", function() {
  $( this ).addClass( "active" );
} ).on( "mouseleave", "li", function() {
  $( this ).removeClass( "active" );
} );

Enter existing li → toggles .active class

Append new li via JavaScript → enter/leave still works


One handler pair on #menu covers all li children

🚀 Common Use Cases

• Dropdown menus — $("#nav-item").on("mouseenter", showSubmenu).on("mouseleave", hideSubmenu).
• Image previews — load or reveal a preview panel when the pointer enters a thumbnail link.
• Table row highlight — $("tr").on("mouseenter", fn).on("mouseleave", fn) for hover rows in data tables.
• Tooltip show — display a tooltip on enter, hide on leave — stable even with nested icon spans inside the trigger.
• Lazy AJAX — fetch detail data once when the pointer enters a card, not on every child crossing.
• Keyboard fallbacks — $("#btn").on("focus", function(){ ... }).trigger("mouseenter") for accessibility parity.

📝 Notes

• Bind with .on("mouseenter", handler) since jQuery 1.7 — not the deprecated .mouseenter(handler) method.
• Trigger with .trigger("mouseenter") since jQuery 1.0.
• jQuery simulates mouseenter in all browsers — it was originally an IE proprietary event.
• mouseenter does not re-fire when moving over child elements — unlike mouseover.
• Always pair with mouseleave for complete hover behavior — not mouseout, which has the same bubbling issue as mouseover.
• Any HTML element can receive mouseenter — not limited to links or buttons.
• Use .off("mouseenter") to remove handlers — avoid deprecated .unbind("mouseenter").
• Touch devices have no true hover — provide click/tap fallbacks for critical UI.

💡 Best Practices