.hover()（マウスホバーイベント）

// マウスが乗ったとき（handlerIn）と離れたとき（handlerOut）のハンドラを登録する
$(selector).hover(handlerIn, handlerOut)

// 入り・出どちらにも同じハンドラを登録する
$(selector).hover(handlerInOut)

マウスの出入りに応じてスタイルを切り替えたり、メッセージを表示したりする基本的な使い方です。

サンプルページはこちら

$(function() {

    // #itadori にマウスが乗ると背景色を変え、離れると元に戻す
    $("#itadori").hover(
        function() {
            $(this).css("background-color", "#ffe066");
        },
        function() {
            $(this).css("background-color", "");
        }
    );

    // マウスが乗るたびに .active クラスをトグルする
    $(".member-card").hover(function() {
        $(this).toggleClass("active");
    });

    // マウスの出入りに応じてボタンのテキストを切り替える
    $("#hoverBtn").hover(
        function() {
            $(this).text("呪術を発動する");
        },
        function() {
            $(this).text("待機中");
        }
    );

    // マウスが乗った要素のIDをコンソールに出力する
    $(".card").hover(
        function(event) {
            console.log("乗った要素:", $(this).attr("id"), "/ イベント:", event.type);
        },
        function(event) {
            console.log("離れた要素:", $(this).attr("id"), "/ イベント:", event.type);
        }
    );

    // .hover() でハンドラを登録した後、続けてスタイルを設定する
    $("#menu-item")
        .hover(
            function() {
                $(this).find(".submenu").slideDown(200);
            },
            function() {
                $(this).find(".submenu").slideUp(200);
            }
        )
        .css("cursor", "pointer");

});

『.hover()』は内部的に『.on("mouseenter", handlerIn).on("mouseleave", handlerOut)』として動作します。mouseenter / mouseleave は子要素へのマウス移動ではイベントが発火しないため、mouseover / mouseout を使ったときのようなバブリングによる意図しない発火が起きません。これにより、入れ子構造の要素でも安定したホバー処理が実現できます。

ハンドラ内の『this』はイベントが発生したDOM要素（HTMLElement）を指します。jQueryメソッドを使いたい場合は『$(this)』とラップして扱います。

登録したハンドラを後から解除したい場合は.off()で "mouseenter" または "mouseleave" を指定して取り外せます。より細かく制御したい場合は.on()で直接 "mouseenter" / "mouseleave" を登録する方法もあります。

関連ページ：.on()（イベントハンドラの登録）、.off()（イベントハンドラの解除）、.click()（クリックイベントの登録）

スマートフォンやタブレットなどのタッチデバイスには「マウスポインターが乗る」という概念がないため、.hover() のイベントが発火しないケースがあります。タッチデバイスでも同様の挙動が必要な場合は、タッチイベントを別途ハンドリングする必要があります。

NG: PC専用を想定して .hover() のみを登録している

$("#itadori-card").hover(
    function() { $(this).addClass("highlight"); },
    function() { $(this).removeClass("highlight"); }
);

OK: タッチイベントも合わせて登録する

$("#itadori-card")
    .hover(
        function() { $(this).addClass("highlight"); },
        function() { $(this).removeClass("highlight"); }
    )
    .on("touchstart", function() {
        $(this).toggleClass("highlight");
    });

.hover() は内部的に mouseenter / mouseleave を使っているため、子要素に移動してもイベントは発火しません。一方、mouseover / mouseout はバブリングするため、子要素に入るたびにイベントが発火します。「子要素に移動するたびにイベントが呼ばれる」という挙動が意図しない場合は、.hover() を使います。

NG: mouseover / mouseout を使うと子要素に入るたびにイベントが発火する

$("#nanami-panel").on("mouseover", function() {
    console.log("マウスが乗りました");
});

OK: .hover() (mouseenter / mouseleave) を使う

$("#nanami-panel").hover(
    function() { console.log("パネルに入りました"); },
    function() { console.log("パネルから出ました"); }
);

.hover() にアニメーションを登録していると、マウスを素早く出し入れするたびにアニメーションがキューに積まれ、ホバーが終わっても動き続けます。アニメーション前に .stop() を呼ぶことでキューをクリアできます。

NG: .stop() なしでアニメーションを登録している

$("#gojo-card").hover(
    function() {
        $(this).fadeIn(300);
    },
    function() {
        $(this).fadeOut(300);
    }
);

OK: アニメーション前に .stop() を呼んでキューをクリアする

$("#gojo-card").hover(
    function() {
        $(this).stop(true, true).fadeIn(300);
    },
    function() {
        $(this).stop(true, true).fadeOut(300);
    }
);