jQuery .hover() Method

What You’ll Learn

The .hover() method is jQuery’s convenience API for binding mouseenter and mouseleave handlers in one call. This tutorial covers .hover(handlerIn, handlerOut) since 1.0, single-function .hover(handlerInOut) since 1.4, migration to .on("mouseenter") and .on("mouseleave"), and why the method is deprecated since jQuery 3.3.

Introduction

Hover effects are everywhere on the web — menus that drop down when you point at them, buttons that change color, table rows that highlight. jQuery’s .hover() method made this easy: pass one function for when the mouse enters and another for when it leaves, without writing two separate .on() calls.

Under the hood, .hover() is not a separate browser event — it binds mouseenter and mouseleave. Those events behave differently from mouseover and mouseout: they do not re-fire when the pointer moves over child elements inside the bound node. That makes .hover() ideal for stable enter/leave behavior on containers with nested content.

Understanding the .hover() Method

The official jQuery API describes .hover() as a way to bind one or two handlers executed when the mouse pointer enters and leaves matched elements. With two functions, the first runs on enter and the second on leave. With one function (since 1.4), the same callback runs for both — inspect event.type to distinguish "mouseenter" from "mouseleave".

Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:

$( selector ).on( "mouseenter", handlerIn ).on( "mouseleave", handlerOut );

📝 Syntax

The .hover() method has two signatures from the official jQuery API. Both are deprecated since 3.3:

1. Two handlers — .hover( handlerIn, handlerOut ) (since 1.0, deprecated 3.3)

.hover( handlerIn, handlerOut )

• handlerIn — runs when the pointer enters the element.
• handlerOut — runs when the pointer leaves the element.
• Modern replacement: .on( "mouseenter", handlerIn ).on( "mouseleave", handlerOut ).

2. Single handler — .hover( handlerInOut ) (since 1.4, deprecated 3.3)

.hover( handlerInOut )

• One function runs for both enter and leave — check event.type inside.
• Modern replacement: .on( "mouseenter mouseleave", handlerInOut ).

3. Unbind — .off( "mouseenter mouseleave" )

$( "td" ).off( "mouseenter mouseleave" );

• There is no separate "hover" event name — unbind the underlying mouseenter/mouseleave handlers.

Return value

• .hover() returns the original jQuery object for chaining.

Examples Gallery

Examples 1–4 follow the official jQuery API documentation. Example 5 covers migration to .on(). Move your pointer over the demo areas in each Try-it lab. Remember: .hover() is deprecated — these demos show legacy syntax you will encounter in older code.

$( "li" ).hover(
  function() {
    $( this ).append( $( "<span> ***</span>" ) );
  },
  function() {
    $( this ).find( "span" ).last().remove();
  }
);

$( "li.fade" ).hover( function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
} );

Hover Milk → appends red ***
Leave → span removed

Hover Chips (has .fade) → fadeOut then fadeIn animation

$( "td" ).hover(
  function() {
    $( this ).addClass( "hover" );
  },
  function() {
    $( this ).removeClass( "hover" );
  }
);

Pointer enters td → .hover class added (highlight background)

Pointer leaves td → .hover class removed

Classic spreadsheet row/column highlight pattern

$( "td" ).off( "mouseenter mouseleave" );

After .off("mouseenter mouseleave") → cells no longer highlight on hover

Click "Remove hover" button in demo to unbind handlers

$( "li" )
  .odd()
  .hide()
  .end()
  .even()
  .hover( function() {
    $( this )
      .toggleClass( "active" )
      .next()
      .stop( true, true )
      .slideToggle();
  } );

Hover even li (Milk, Carrots) → .active class + next odd li slides open

Hover again (leave) → toggles back — same fn runs on enter and leave

.odd() detail rows start hidden

$( "#legacy" ).hover(
  function() {
    $( "#out" ).text( "Legacy: .hover(fnIn, fnOut) — deprecated since jQuery 3.3." );
  },
  function() {
    $( "#out" ).text( "Legacy: pointer left #legacy." );
  }
);

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

Hover #legacy → legacy enter message
Leave #legacy → legacy leave message

Hover #modern → modern enter message
Leave #modern → modern leave message

Behavior is identical — only the API differs

🚀 Common Use Cases

• Navigation menus — show dropdown on enter, hide on leave — classic .hover(fnIn, fnOut) pattern.
• Table row highlight — add/remove a CSS class on td or tr hover for spreadsheet UIs.
• Tooltip preview — append or show a tooltip element on enter, remove on leave.
• Image swap — change src on enter, restore on leave for product galleries.
• Accordion details — single-function .hover(fn) with .slideToggle() on adjacent rows.
• Reading legacy code — recognize .hover() as mouseenter + mouseleave when maintaining older jQuery projects.

📝 Notes

• Deprecated since jQuery 3.3 — use .on("mouseenter", fnIn).on("mouseleave", fnOut) in new code.
• Two-handler form since jQuery 1.0; single-handler form since 1.4.
• There is no "hover" event — unbind with .off("mouseenter mouseleave").
• mouseenter / mouseleave do not bubble from children — stable for containers with nested elements.
• Prefer CSS :hover for pure styling; use JavaScript hover handlers for DOM changes and animations.
• Touch devices have no true hover — provide click/tap alternatives for mobile users.
• Do not confuse .hover() with the removed .live() or browser mouseover — each behaves differently.

💡 Best Practices