jQuery .mouseover() Method

Beginner
Deprecated since 3.3
7 min read
Updated: Oct 2026
5 examples
Live preview
jQuery .mouseover() method — deprecated shorthand for binding and triggering mouseover
Definition

What Is .mouseover()?

.mouseover() is jQuery’s legacy shorthand for the mouseover event (since 1.0). Pass a handler to bind; call it with no arguments to trigger. Binding forms are deprecated since 3.3 — prefer .on() / .trigger().

Remember
$("#box").mouseover(fn)              // bind (deprecated)
$("#box").mouseover({ id: 1 }, fn)   // bind + eventData (deprecated)
$("#box").mouseover()                // trigger (prefer .trigger)

// Modern:
$("#box").on("mouseover", fn)
$("#box").trigger("mouseover")

// Nested menus? Prefer mouseenter instead.
NeedLegacyModern
Bind.mouseover(fn).on("mouseover", fn)
Pass data.mouseover(data, fn).on("mouseover", data, fn)
Trigger.mouseover().trigger("mouseover")
Nested enter.on("mouseenter", fn)
Approach

How to Use .mouseover()

Read legacy enter handlers safely, then rewrite them to the modern event API.

  1. Decide if the call is a bind (function passed) or a trigger (no args).
  2. For new work, use .on("mouseover", handler) instead of .mouseover(handler).
  3. Replace no-arg .mouseover() with .trigger("mouseover").
  4. If nesting causes flicker, switch to mouseenter / mouseleave.
PieceRequired?Role
handlerFor bindfunction(event) { … }
eventDataOptionalObject available as event.data (since 1.4.3)
No argumentsFor triggerFires mouseover on matched elements
Return—jQuery object (chainable)

Pseudocode

Pseudocode
if called with handler (and optional data):
  register handler for "mouseover"   // same as .on(...)
  // deprecated since 3.3 — prefer .on("mouseover", …)

if called with no arguments:
  fire "mouseover" on each matched element
  // prefer .trigger("mouseover")

on each enter (including Outer → Inner):
  call handler(event)  // bubbling still applies
Reference

Cheat Sheet

Keep these migration facts handy when reading older jQuery.

TopicDetail
Bind (1.0).mouseover(handler) — deprecated 3.3
Bind + data (1.4.3).mouseover(eventData, handler) — deprecated 3.3
Trigger (1.0).mouseover() → prefer .trigger("mouseover")
Bubbles?Yes — child crossings notify the parent
DelegationNot available via shorthand — use .on("mouseover", sel, fn)
StatusWorks in jQuery 3.x; avoid in new code
Try it

Live Preview

Enter the pad (legacy .mouseover(fn)) or click Trigger (no-arg .mouseover()).

Uses deprecated .mouseover() — prefer .on() / .trigger() for new code.

Result
Enter the pad or click Trigger
→ bind vs trigger (legacy shorthand)
Code

jQuery Examples

Short legacy snippets plus the modern rewrite. Open Try It Yourself to run each lab.

Example 1 — Bind with .mouseover(handler)

Log enter events with the deprecated binding shorthand — child crossings also fire.

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

// Prefer: $("#outer").on("mouseover", function () { … });
Try It Yourself

How It Works

  1. Pass a function. .mouseover(fn) registers the handler (deprecated).
  2. Enter the element. Arriving from outside runs the function.
  3. Cross into a child. Outer → Inner also fires because mouseover bubbles.
  4. Migrate. Swap to .on("mouseover", fn) — or mouseenter for nesting.

Example 2 — Pass eventData

Since 1.4.3, pass an object before the handler — available as event.data.

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

// Prefer: .on("mouseover", { action: "show" }, fn)
Try It Yourself

How It Works

  1. First argument is data. { action: "show" } is not the handler.
  2. Second argument is the function. It runs on each enter.
  3. Read event.data. Shared config without an extra closure.
  4. Modern form. Same pattern with .on("mouseover", data, fn).

Example 3 — Trigger with No Arguments

Call .mouseover() with no args to fire bound handlers programmatically.

jQuery
var count = 0;

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

$("#fire").on("click", function () {
  $("#outer").mouseover();  // prefer .trigger("mouseover")
});
Try It Yourself

How It Works

  1. Bind first. A handler must exist for the trigger to do anything useful.
  2. Empty call fires. .mouseover() synthesizes the event.
  3. Same handlers run. Real enters and triggers share the callback.
  4. Prefer clarity. Write .trigger("mouseover") in new code.

Example 4 — Migrate to .on("mouseover")

Side-by-side: deprecated shorthand vs the modern binding API.

jQuery
// Legacy (deprecated)
$("#legacy").mouseover(function () {
  $("#log").text("Legacy .mouseover(fn)");
});

// Modern (preferred)
$("#modern").on("mouseover", function () {
  $("#log").text("Modern .on('mouseover', fn)");
});
Try It Yourself

How It Works

  1. Same event name. Both listen for mouseover.
  2. Behavior matches. For a simple bind, results are identical.
  3. .on() is the future. Supports delegation and one consistent API.
  4. Bubbling stays. Migration alone does not fix nested-menu flicker.

Example 5 — Legacy .mouseover() + .mouseout()

Older hover pairs often use both shorthands on flat elements.

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

// Prefer: .on("mouseover" / "mouseout")
// Nested content? Prefer mouseenter / mouseleave
Try It Yourself

How It Works

  1. Enter with mouseover. Legacy enter shorthand runs on arrival.
  2. Leave with mouseout. Legacy leave shorthand runs on exit.
  3. Flat targets. No nested children → fewer false enters.
  4. Modern rewrite. Use .on(), or mouseenter / mouseleave for nesting.

Edge Cases & Pitfalls

Watch for these when reading or migrating .mouseover() code.

deprecated

Do not use in new projects

Binding forms are deprecated since 3.3. Prefer .on("mouseover") everywhere new.

bubble

Migration does not stop bubbling

.on("mouseover") has the same child-crossing behavior. Use mouseenter for nested menus.

overload

Bind vs trigger look alike

.mouseover(fn) binds; .mouseover() fires. Always check the arguments.

delegate

No event delegation

Shorthand cannot do .on("mouseover", ".child", fn). Use .on() for dynamic children.

pair

Legacy over/out pairs

Old code often chains .mouseover().mouseout(). Rewrite both sides to .on().

Compatibility

Browser Support

.mouseover() has shipped since jQuery 1.0 (eventData form since 1.4.3). It works wherever your jQuery build runs. Binding forms are deprecated since 3.3 but still functional in jQuery 3.x.

✓ jQuery 1.0+ · Deprecated 3.3

jQuery .mouseover()

Available in jQuery 1.x, 2.x, and 3.x across Chrome, Firefox, Safari, Edge, and other browsers with jQuery loaded.

100% With jQuery loaded
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
.mouseover() Browsers

Bottom line: Safe to encounter in legacy apps. For new code, use .on("mouseover") and .trigger("mouseover") — or mouseenter for nested UI.

Analysis

Performance Notes

ApproachCostBest for
.mouseover(fn)Same as .on()Legacy reading only
.on("mouseover", fn)Same bind cost + delegationFlat targets / migration
mouseenterFewer enter callsMenus and nested content

Migrating shorthand to .on() does not change event frequency. Nested trees still produce extra enter calls until you switch to mouseenter.

Remember

Key Takeaways

  • Role: legacy bind-or-trigger shorthand for mouseover.
  • Status: binding forms deprecated since jQuery 3.3.
  • Migrate: .on("mouseover") + .trigger("mouseover").
  • Nesting: prefer mouseenter when children cause false enters.

One line: recognize .mouseover() in old code — write .on("mouseover") (or mouseenter) in new code.

Frequently Asked Questions

With a handler — .mouseover(fn) or .mouseover(eventData, fn) — it binds a function that runs when the pointer enters the element (and when moving into a child, because mouseover bubbles). With no arguments — .mouseover() — it triggers the event. Binding forms are deprecated since jQuery 3.3.
Yes. Prefer .on('mouseover', handler) for binding and .trigger('mouseover') for firing. jQuery 3.x still runs the shorthand for compatibility; migrate when you touch legacy code.
.mouseover(fn) only registers a callback. .mouseover() with no arguments fires the event on each matched element (same idea as .trigger('mouseover')). Check whether a function is passed before reading old code.
mouseover bubbles. Entering Inner from Outer still notifies Outer. For nested menus, prefer .on('mouseenter', fn) — mouseenter ignores child crossings.
Replace .mouseover(fn) with .on('mouseover', fn). Replace .mouseover(data, fn) with .on('mouseover', data, fn). Replace no-arg .mouseover() with .trigger('mouseover'). Unbind with .off('mouseover').
Yes for backward compatibility. It still binds and triggers correctly. Do not use it in new projects — use the modern mouseover event API, or mouseenter for nested UI.

Next: .addClass()

Continue into jQuery CSS helpers — add classes without touching inline styles.

.addClass() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

jQuery mouseover Event jQuery .addClass() Method