jQuery .hover() Method

What Is the .hover() Method?

.hover() binds handlers for mouseenter and mouseleave in one call. With two functions it runs enter then leave; with one function (since 1.4) the same handler runs for both. Prefer .on in new code.

$("#box").hover(fnIn, fnOut)   // deprecated
$("#box").hover(fnInOut)       // deprecated (1.4+)

// Modern:
$("#box").on("mouseenter", fnIn).on("mouseleave", fnOut)
$("#box").on("mouseenter mouseleave", fnInOut)

How to Use .hover()

Know the two signatures, then map them to .on.

1. Select element(s): $("li"), $("#box"), etc.
2. Two handlers (legacy): .hover(fnIn, fnOut).
3. One handler (legacy, 1.4+): .hover(fn) — check event.type if needed.
4. Unbind with .off("mouseenter mouseleave").

Pseudocode

function hover(element, fnIn, fnOut?):
    if fnOut given:
        on mouseenter → fnIn
        on mouseleave → fnOut
    else:
        on mouseenter → fnIn
        on mouseleave → fnIn   // same function

// Prefer naming events with .on("mouseenter") / .on("mouseleave")

Cheat Sheet

Quick map from shorthand to modern calls.

Live Preview

Run presets that show two-handler hover, single-handler, unbind, and migration (simulated with mouseenter / mouseleave triggers).

enter
leave

jQuery Examples

Short snippets for legacy .hover(). Prefer the modern forms in new work — use Try It Yourself to experiment.

$("li").hover(
  function () {
    $(this).append(" ***");
  },
  function () {
    $(this).text($(this).text().replace(" ***", ""));
  }
);

Milk ***   (while hovered)

$("td").hover(
  function () {
    $(this).data("label", $(this).text());
    $(this).text("[*] " + $(this).data("label"));
  },
  function () {
    $(this).text($(this).data("label"));
  }
);

[*] A1   (while hovered)

$("td").hover(fnIn, fnOut);

$("#remove").on("click", function () {
  $("td").off("mouseenter mouseleave");
});

Hover removed via .off("mouseenter mouseleave").

$("li.item").hover(function () {
  $(this).next(".detail").toggle();
});

(detail row toggles on enter and again on leave)

// Legacy
$("#legacy").hover(
  function () { console.log("enter (legacy)"); },
  function () { console.log("leave (legacy)"); }
);

// Modern (use this)
$("#modern")
  .on("mouseenter", function () { console.log("enter"); })
  .on("mouseleave", function () { console.log("leave"); });

enter
leave

Performance Notes

Switching to .on does not slow you down — it clarifies intent and unlocks delegation. Keep enter/leave handlers light.

Key Takeaways