【jQuery】hover()でマウスオーバー時に処理を実行する方法｜mouseenter/leave・CSSとの比較まで

jQueryの hover() はマウスが要素に乗ったとき（mouseenter）と離れたとき（mouseleave）の処理を一括定義できるメソッドです。本記事ではhover()の基本から、CSSトランジションとの組み合わせ・パフォーマンス最適化・タッチデバイス対応まで解説します。

1. hover()の基本構文

hover() には2つの関数を渡します。1つ目がmouseenter（乗った時）、2つ目がmouseleave（離れた時）です。

// 基本構文: hover(onEnter, onLeave)
$('.btn').hover(
  function () {
    // マウスが乗った時
    $(this).addClass('is-hover');
  },
  function () {
    // マウスが離れた時
    $(this).removeClass('is-hover');
  }
);

// 1つの関数だけ渡すと、入った時も離れた時も同じ関数が実行される
$('.btn').hover(function () {
  $(this).toggleClass('is-hover');
});

2. マウスイベントの種類と違い

3. クラス追加とCSSトランジションの組み合わせ

jQueryで状態クラスを付け外しし、アニメーションはCSSトランジションに任せる方法が最もパフォーマンス良好です。

.card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card.is-hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

$('.card').hover(
  function () { $(this).addClass('is-hover'); },
  function () { $(this).removeClass('is-hover'); }
);

4. ドロップダウンメニューの実装

$(function () {
  // ホバーでドロップダウンを表示
  $('.nav-item').hover(
    function () {
      $(this).find('.dropdown').stop(true, true).slideDown(200);
    },
    function () {
      $(this).find('.dropdown').stop(true, true).slideUp(200);
    }
  );
});

5. CSSのhover擬似クラスとの使い分け

単純なスタイル変更はCSSの :hover 擬似クラスで十分です。jQueryのhover()はJavaScriptの処理が必要な場合に使います。

6. タッチデバイスの注意点

スマートフォンなどのタッチデバイスでは hover イベントは存在しません（タッチには mouseover が擬似的に発火しますが挙動が不安定）。ホバー操作が必須なUIはタッチデバイスへの代替対応が必要です。

// タッチデバイスを判定してhoverを設定
if (!('ontouchstart' in window)) {
  // タッチ非対応デバイス（PC）のみhoverを設定
  $('.card').hover(
    function () { $(this).addClass('is-hover'); },
    function () { $(this).removeClass('is-hover'); }
  );
}

まとめ

jQueryの hover() はマウスの出入りを一括処理できる便利なメソッドです。スタイル変化だけならCSSの :hover + transition の方が高速です。jQueryは「ホバー時にAjaxを実行する」「クラス付け外しで複雑なアニメーションを制御する」場合に活用しましょう。タッチデバイス対応は別途考慮が必要です。

関連記事: jQueryのclassの追加と削除を行う方法 / jQueryのblur()でフォーカスが外れた瞬間に処理を実行する方法

よくある質問（FAQ）