【jQuery】マウスオーバーで画像を切り替える完全ガイド｜hover・data属性・フェード・touch対応まで

jQueryの hover() を使うと、マウスオーバー時に画像を別の画像へ切り替えられます。商品のカラーバリエーション・バナーのハイライト・ギャラリーのプレビューなど、UXを高める画像インタラクションを短いコードで実現できます。

hover()でsrc属性を変更する基本実装

jQueryの hover() は、マウスオーバー時と離れたときの2つの関数を受け取ります。コールバック内で attr("src", ...) を使ってsrc属性を書き換えるのが最もシンプルな実装です。

HTMLと基本のjQuery

<img id="product-img" src="product-default.jpg" alt="商品画像" width="300" height="200">

$(function () {
  $('#product-img').hover(
    function () {
      // マウスオーバー: 画像を切り替える
      $(this).attr('src', 'product-hover.jpg');
    },
    function () {
      // マウスアウト: 元の画像に戻す
      $(this).attr('src', 'product-default.jpg');
    }
  );
});

data-*属性でhover先画像を管理する

HTMLに data-hover 属性として切り替え先画像を書いておくと、jQueryのコードを変更せずにHTMLだけで画像を管理できます。複数の画像を扱う場合に特に有効です。

<!-- data-hover属性に切り替え先画像のパスを書く -->
<img class="hover-img" src="item1-default.jpg" data-hover="item1-hover.jpg" alt="商品1" width="200">
<img class="hover-img" src="item2-default.jpg" data-hover="item2-hover.jpg" alt="商品2" width="200">
<img class="hover-img" src="item3-default.jpg" data-hover="item3-hover.jpg" alt="商品3" width="200">

$(function () {
  $('.hover-img').hover(
    function () {
      var $img = $(this);
      // data-hover属性から切り替え先を取得
      $img.data('original', $img.attr('src'))  // 元画像を保存
          .attr('src', $img.data('hover'));
    },
    function () {
      // 保存した元画像に戻す
      $(this).attr('src', $(this).data('original'));
    }
  );
});

フェード効果付きの画像切り替え（クロスフェード）

瞬時に切り替わるのではなく、フェードイン/フェードアウトでなめらかに画像を切り替えるパターンです。CSSで position:absolute を重ねてクロスフェードを実現します。

CSSの設定

.img-wrapper {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
}
.img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-wrapper .img-hover {
  opacity: 0;  /* 最初は非表示 */
}

HTMLとjQuery

<div class="img-wrapper">
  <img class="img-default" src="product-default.jpg" alt="通常時">
  <img class="img-hover"   src="product-hover.jpg"   alt="ホバー時">
</div>

$(function () {
  $('.img-wrapper').hover(
    function () {
      // ホバー画像をフェードイン
      $(this).find('.img-hover').stop(true).fadeTo(300, 1);
    },
    function () {
      // ホバー画像をフェードアウト（元画像が見える）
      $(this).find('.img-hover').stop(true).fadeTo(300, 0);
    }
  );
});

複数画像をeach()でまとめて登録する

商品一覧など同じクラスの画像が複数ある場合、each() を使わずに共通クラスにhoverを登録するだけで全て処理できます。また、hover前に画像を事前読み込みしておくことで切り替え時のちらつきを防げます。

<div class="product-list">
  <img class="product-thumb" src="p1.jpg" data-hover="p1-hover.jpg" alt="商品A">
  <img class="product-thumb" src="p2.jpg" data-hover="p2-hover.jpg" alt="商品B">
  <img class="product-thumb" src="p3.jpg" data-hover="p3-hover.jpg" alt="商品C">
</div>

$(function () {
  // ホバー画像を事前読み込み（ちらつき防止）
  $('.product-thumb').each(function () {
    var hoverSrc = $(this).data('hover');
    if (hoverSrc) {
      var img = new Image();
      img.src = hoverSrc;  // ブラウザキャッシュに乗せる
    }
  });

  // まとめてhover登録
  $('.product-thumb').hover(
    function () {
      $(this).attr('src', $(this).data('hover'));
    },
    function () {
      $(this).attr('src', $(this).attr('src').replace('-hover', ''));
    }
  );
});

タッチデバイス対応（スマートフォン）

スマートフォンではマウスオーバーイベントが発生しません。タッチデバイスでも画像切り替えを動作させるには touchstart/touchend を追加します。

$(function () {
  var $img = $('#product-img');
  var defaultSrc = $img.attr('src');
  var hoverSrc   = $img.data('hover');

  // マウス操作（PC）
  $img.on('mouseenter', function () {
    $(this).attr('src', hoverSrc);
  }).on('mouseleave', function () {
    $(this).attr('src', defaultSrc);
  });

  // タッチ操作（スマートフォン・タブレット）
  $img.on('touchstart', function () {
    $(this).attr('src', hoverSrc);
  }).on('touchend touchcancel', function () {
    $(this).attr('src', defaultSrc);
  });
});

CSSのみ（:hover擬似クラス）との比較・使い分け

画像の切り替えはCSSだけでも実装できます。jQueryを使う場合とCSSのみを使う場合の特徴を比較します。

CSSのみで実装する例（background-imageを切り替える）

<div class="hover-banner"></div>

.hover-banner {
  width: 300px;
  height: 200px;
  background-image: url("banner-default.jpg");
  background-size: cover;
  transition: background-image 0s;  /* 瞬時に切り替わる */
}
.hover-banner:hover {
  background-image: url("banner-hover.jpg");
}

まとめ

jQueryでマウスオーバー時に画像を切り替えるには、hover() コールバック内で attr("src", ...) を変更するのが最もシンプルです。data-hover 属性で切り替え先を管理することでHTMLとJSを分離できます。フェード効果が必要な場合はCSSで重ね表示 + fadeTo()、スマートフォン対応が必要な場合は touchstart/touchend を追加してください。

関連記事: attr()完全ガイド / アニメーション完全ガイド / デバイス判定完全ガイド / data属性の取得・設定完全ガイド

よくある質問（FAQ）