jQuery .mouseenter() Method

What You’ll Learn

The .mouseenter() method is jQuery’s legacy shorthand for binding and triggering the mouseenter event. This tutorial covers .mouseenter(handler) since 1.0, .mouseenter(eventData, handler) since 1.4.3, no-argument .mouseenter() as a trigger, migration to .on("mouseenter") and .trigger("mouseenter"), and why the binding form is deprecated since jQuery 3.3. For the modern mouseenter event API, see the jQuery mouseenter event tutorial.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .click(), .mouseenter(), .keydown(), and dozens more. The .mouseenter() method let you bind a hover-enter handler in one short call: $("#menu").mouseenter(function(){ ... }). It remains in jQuery 3.x for backward compatibility but is marked deprecated.

Understanding .mouseenter() matters when reading older dropdown menus, tooltip plugins, and legacy tutorials. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Modern jQuery splits those roles explicitly — .on("mouseenter", handler) for binding and .trigger("mouseenter") for firing. This page documents the shorthand API and shows how to migrate.

Understanding the .mouseenter() Method

The official jQuery API describes .mouseenter() as a way to bind an event handler to the mouseenter event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched element and calls it when the pointer enters that element — without re-firing when moving over nested children, unlike mouseover.

When you call .mouseenter() with no arguments, jQuery synthetically fires the mouseenter event on each matched element. Bound handlers run immediately. This trigger behavior is equivalent to .trigger("mouseenter").

📝 Syntax

The .mouseenter() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("mouseenter") is preferred:

1. Bind a handler — .mouseenter( handler ) (since 1.0, deprecated 3.3)

.mouseenter( handler )

• handler — function executed each time mouseenter fires: function( event ) { ... }.
• Returns the jQuery object for chaining.
• Modern replacement: .on( "mouseenter", handler ).

2. Bind with eventData — .mouseenter( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.mouseenter( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "mouseenter", eventData, handler ).

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

.mouseenter()

• No arguments — triggers mouseenter on every matched element.
• Runs bound mouseenter handlers.
• Preferred replacement: .trigger( "mouseenter" ).

Official jQuery API migration note

// Deprecated binding
$( "#outer" ).mouseenter( function() {
  $( "#log" ).append( " Handler for `mouseenter` called. " );
} );

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

// Deprecated trigger
$( "#outer" ).mouseenter();

// Modern trigger
$( "#outer" ).trigger( "mouseenter" );

Return value

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

Examples Gallery

Five examples cover binding, eventData, triggering, migration from .mouseenter() to .on("mouseenter"), and legacy enter/leave chaining. Use the Try-it links to run each snippet in the browser. Remember: binding with .mouseenter(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

$( "#outer" ).mouseenter( function() {
  $( "#log" ).append( " Handler ran via .mouseenter(function(){ ... }). " );
} );

Pointer enters #outer → log appends handler message

Moving over Inner child → handler does NOT fire again

Deprecated — prefer .on("mouseenter", fn) for new code

$( ".preview" ).mouseenter( { panel: "tooltip" }, function( event ) {
  var id = $( this ).data( "id" );
  $( "#log" ).text(
    "Preview: " + id + " | eventData.panel: " + event.data.panel
  );
} );

Enter Photo A → "Preview: photo-a | eventData.panel: tooltip"

Enter Photo B → "Preview: photo-b | eventData.panel: tooltip"

Same handler, shared eventData on every .preview link

var count = 0;

$( "#outer" ).mouseenter( function() {
  count++;
  $( "#log" ).text( "Outer handler fired (count: " + count + ")" );
} );

$( "#fire" ).click( function() {
  $( "#outer" ).mouseenter();
} );

Enter #outer directly → count increments

Click #fire → $("#outer").mouseenter() → same handler runs

No-arg .mouseenter() is trigger shorthand — prefer .trigger("mouseenter")

$( "#legacy" ).mouseenter( function() {
  $( "#log" ).text( "Legacy: .mouseenter(function(){ ... }) — deprecated since jQuery 3.3." );
} );

$( "#modern" ).on( "mouseenter", function() {
  $( "#log" ).text( "Modern: .on('mouseenter', function(){ ... }) — use this for new code." );
} );

Enter #legacy → legacy deprecation message

Enter #modern → modern .on("mouseenter") message

Behavior is identical — only the API name differs

$( "#card" )
  .mouseenter( function() {
    $( this ).addClass( "highlight" );
    $( "#log" ).text( "Entered — .highlight added via .mouseenter()." );
  } )
  .mouseleave( function() {
    $( this ).removeClass( "highlight" );
    $( "#log" ).text( "Left — .highlight removed via .mouseleave()." );
  } );

Enter #card → .highlight class added

Leave #card → .highlight removed

Same as .hover(fnIn, fnOut) — but explicit event names are clearer

🚀 Common Use Cases

• Reading legacy code — recognize $("#menu").mouseenter(fn) as equivalent to .on("mouseenter", fn) in older dropdown plugins.
• Tooltip plugins — legacy code often uses .mouseenter(fn) to show tooltips — migrate to .on("mouseenter", fn).
• Proxy triggers — $("#btn").click(function(){ $("#panel").mouseenter(); }) — replace inner no-arg .mouseenter() with .trigger("mouseenter").
• Shared eventData — $(".thumb").mouseenter({ size: "large" }, fn) passes metadata without closures.
• Enter/leave pairs — chain .mouseenter(fnIn).mouseleave(fnOut) — same pattern as deprecated .hover().
• Automated testing — test suites may call .mouseenter() to simulate hover — consider .trigger("mouseenter") for explicit intent.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .mouseenter(handler) or .mouseenter(eventData, handler) in new code. Use .on("mouseenter") instead.
• Bind with .mouseenter(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .mouseenter() triggers the event since jQuery 1.0 — prefer .trigger("mouseenter").
• .mouseenter() does not support event delegation — use .on("mouseenter", selector, fn) for dynamic menus.
• Pair with .mouseleave() or .on("mouseleave") for complete hover — not mouseout.
• Remove handlers with .off("mouseenter") — not by calling .mouseenter(undefined).
• Legacy code using .mouseenter() still runs in jQuery 3.x — migrate when you refactor those files.
• For the full modern mouseenter guide — vs mouseover, delegation, and triggers — see the jQuery mouseenter event tutorial.

💡 Best Practices