jQuery mouseover Event

What You’ll Learn

The mouseover event fires when the mouse pointer enters an element. This tutorial covers binding with .on("mouseover"), triggering with .trigger("mouseover"), understanding bubbling and event.relatedTarget, comparing mouseover with mouseenter, and when to prefer mouseenter for nested menus.

Introduction

Every hover interaction has an entry — dropdowns open, tooltips appear, and highlight classes are added when the pointer enters. jQuery’s mouseover event is the classic way to run JavaScript at that moment, but its bubbling behavior can surprise developers working with nested elements.

The official jQuery API distinguishes the mouseover event (bound with .on("mouseover") since 1.7) from the deprecated .mouseover() method used in older code. Unlike mouseenter, mouseover bubbles — it fires when entering the bound element or when moving from the parent into a child inside it. To programmatically fire a handler, use .trigger("mouseover") — available since jQuery 1.0.

Understanding the mouseover Event

The mouseover event is sent to an element when the mouse pointer enters that element. Because it bubbles, moving from a parent into a child inside the bound element also triggers mouseover on the parent — the event trickles up the DOM tree just like a physical entry on every child boundary.

This bubbling behavior causes headaches with nested menus and tooltips. When the pointer moves from a menu item into its submenu, mouseover fires on the parent container again — making it look like the user entered the menu from outside. For nested content, jQuery recommends mouseenter paired with mouseleave instead. If you must use mouseover, inspect event.relatedTarget to filter false positives.

📝 Syntax

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

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

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

• eventData — optional object passed to the handler as event.data.
• handler — function called each time mouseover fires: function( event ) { ... }. Use event.relatedTarget to detect where the pointer came from.

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

$( "#menu" ).on( "mouseover", "li", function( event ) {
  // runs when pointer enters any li inside #menu — bubbles from children
} );

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

.trigger( "mouseover" )

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

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

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

Official jQuery API examples

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

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

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 event.relatedTarget filtering and the legacy mouseover + mouseout hover pair. Use the Try-it links to run each snippet in the browser.

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

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

Moving from Outer into Inner child → handler ALSO fires (bubbles)

mouseover fires when entering element OR crossing into a child

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

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

Enter #outer → log message appended

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

Programmatic trigger invokes bound handlers

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

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

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

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

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

$( "#outer" ).on( "mouseover", function( event ) {
  if ( $( event.relatedTarget ).closest( "#outer" ).length ) {
    return; // pointer came from inside #outer
  }
  $( "#log" ).append( " Entered #outer from outside." );
} );

Move from Outer into Inner → relatedTarget is inside #outer → handler returns early

Enter #outer from outside → relatedTarget is outside → log appends "Entered #outer from outside."

Filters bubbling false positives on nested content

$( ".card" )
  .on( "mouseover", function() {
    $( this ).addClass( "highlight" );
  } )
  .on( "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

• Legacy hover pairs — maintain existing mouseover / mouseout code on flat elements without nested children.
• Filter with relatedTarget — ignore child-boundary crossings when refactoring away from mouseover is not yet possible.
• Highlight table rows — $("tr").on("mouseover", fn) on table rows with no nested interactive elements.
• Show flat tooltips — reveal a tooltip when entering a trigger that has no nested content inside it.
• Event delegation — $("#list").on("mouseover", "li", fn) when list items have no nested children.
• Programmatic testing — $("#box").trigger("mouseover") to verify show logic in unit tests.

📝 Notes

• Bind with .on("mouseover", handler) since jQuery 1.7 — not the deprecated .mouseover(handler) method.
• Trigger with .trigger("mouseover") since jQuery 1.0.
• mouseover bubbles — unlike mouseenter, it fires when moving from parent into a child.
• Use event.relatedTarget to filter false positives when the pointer came from a child still inside the bound element.
• For nested menus and tooltips, prefer mouseenter + mouseleave over mouseover + mouseout.
• Any HTML element can receive mouseover — not limited to links or buttons.
• Use .off("mouseover") to remove handlers — avoid deprecated .unbind("mouseover").
• Touch devices have no true hover — provide click/tap fallbacks for critical UI.

💡 Best Practices