jQuery .mouseover() Method

What You’ll Learn

The .mouseover() method is jQuery’s legacy shorthand for binding and triggering the mouseover event. This tutorial covers .mouseover(handler) since 1.0, .mouseover(eventData, handler) since 1.4.3, no-argument .mouseover() as a trigger, migration to .on("mouseover") and .trigger("mouseover"), and why the binding form is deprecated since jQuery 3.3. Because mouseover bubbles, handlers also fire when moving into nested children — for nested menus, prefer mouseenter. For the modern mouseover event API, see the jQuery mouseover event tutorial.

Introduction

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

Understanding .mouseover() matters when reading older card hover effects, tooltip plugins, and legacy tutorials. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Unlike mouseenter, the mouseover event bubbles — a handler on #outer fires when the pointer enters an inner child, not only when crossing the outer boundary from outside. Modern jQuery splits binding and triggering explicitly — .on("mouseover", handler) for binding and .trigger("mouseover") for firing. This page documents the shorthand API and shows how to migrate.

Understanding the .mouseover() Method

The official jQuery API describes .mouseover() as a way to bind an event handler to the mouseover 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 — including when the pointer moves from the element into a nested child inside it, because mouseover bubbles.

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

📝 Syntax

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

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

.mouseover( handler )

• handler — function executed each time mouseover fires: function( event ) { ... }. Use event.relatedTarget to filter child-boundary crossings.
• Returns the jQuery object for chaining.
• Modern replacement: .on( "mouseover", handler ).

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

.mouseover( [eventData], handler )

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

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

.mouseover()

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

Official jQuery API migration note

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

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

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

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

Return value

• All .mouseover() 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 .mouseover() to .on("mouseover"), and the legacy .mouseover() + .mouseout() hover pair. Use the Try-it links to run each snippet in the browser. Remember: binding with .mouseover(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

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

Pointer enters #outer from outside → log appends handler message

Moving into Inner child inside #outer → handler ALSO fires (bubbles)

For nested menus prefer .on("mouseenter", fn) — deprecated .mouseover(fn) for new code

$( ".tooltip" ).mouseover( { action: "show" }, function( event ) {
  var id = $( this ).data( "id" );
  $( "#log" ).text(
    "Show: " + id + " | eventData.action: " + event.data.action
  );
} );

Enter Help A → "Show: help-a | eventData.action: show"

Enter Help B → "Show: help-b | eventData.action: show"

Same handler, shared eventData on every .tooltip trigger

var count = 0;

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

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

Enter #outer directly → count increments

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

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

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

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

Enter #legacy → legacy deprecation message

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

Behavior is identical — only the API name differs

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

Enter a .card → .highlight class added (.mouseover)

Leave the card → .highlight removed (.mouseout)

Nested caveat: moving between child elements inside a card re-fires mouseout/mouseover — use mouseenter/mouseleave or relatedTarget filter instead

🚀 Common Use Cases

• Reading legacy code — recognize $("#card").mouseover(fn) as equivalent to .on("mouseover", fn) in older hover plugins.
• Legacy hover pairs — maintain existing .mouseover() / .mouseout() code on flat elements without nested children.
• Proxy triggers — $("#btn").click(function(){ $("#panel").mouseover(); }) — replace inner no-arg .mouseover() with .trigger("mouseover").
• Shared eventData — $(".tip").mouseover({ action: "show" }, fn) passes metadata without closures.
• Flat row highlight — $("tr").mouseover(fn) on table rows with no nested interactive elements.
• Automated testing — test suites may call .mouseover() to simulate enter — consider .trigger("mouseover") for explicit intent.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .mouseover(handler) or .mouseover(eventData, handler) in new code. Use .on("mouseover") instead.
• Bind with .mouseover(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .mouseover() triggers the event since jQuery 1.0 — prefer .trigger("mouseover").
• mouseover bubbles — handlers fire when moving from a parent into a child inside the bound element. For nested menus, prefer mouseenter.
• .mouseover() does not support event delegation — use .on("mouseover", selector, fn) for dynamic lists.
• Filter false positives with event.relatedTarget — see the modern mouseover event tutorial.
• Remove handlers with .off("mouseover") — not by calling .mouseover(undefined).
• Legacy code using .mouseover() still runs in jQuery 3.x — migrate when you refactor those files.

💡 Best Practices