【jQuery初心者向け】ホバーで画像切り替えを実装する方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

この記事で紹介する「hoverメソッドでimgタグのsrc属性の値を切り替える方法」を実践すれば、ホバー時の画像切り替えを実装することができるようになります！

それでは見て参りましょう〜！

src属性の値の一部を書き換える

今回、マウスオーバーの対象となるのは以下のHTMLです。

<img src="img_off.jpg" class="Item">

マウスオーバーした時に表示する画像ファイル名は、「img_on.jpg」にして用意しておきましょう。

上記のように「同じワード + on or off」で画像ファイルを命名することで、
onとoffの部分を書き換えるだけで画像を切り替えることができるので無駄がありません。

今回紹介するサンプルは、マウスオーバー前は犬の画像、マウスオーバー時はリスの画像を表示させる仕様です。

img_off.jpg マウスオーバー前の画像

img_on.jpg マウスオーバー後の画像

以下、jQueryで画像を切り替えるスクリプトとなります。

$('.Item').each(function() {

  let img_off = $(this).attr('src');
  let img_on = $(this).attr('src').replace('off', 'on');

  $(this).hover(
    function () {
      $(this).attr('src', img_on);
    },
    function () {
      $(this).attr('src', img_off);
    }
  );

});

マウスオーバー前の画像とマウスオーバー時の画像のsrc属性の値をあらかじめ変数にそれぞれ代入しておきます。

あとはjQueryのhoverメソッドで、画像がホバーされた時と外した時にsrcの値を用意しておいた変数に書き換えてやればOKです。

hoverメソッドの基本的な使い方は以下の通り。

$(this).hover(
    function () {
      // マウスカーソルが要素内に入ったときに実行される処理
    },
    function () {
      // マウスカーソルが要素内から出たときに実行される処理
    }
  );

デモ

実際の動作はこちらのデモで確認してください〜！

See the Pen
poJKrRZ by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

以上、jQueryのhoverメソッドを使ってホバーに応じて画像を切り替える方法を紹介しました。

最後にもう一度内容を振り返って締めとします！

「jQueryの基本的なメソッドや実践的な使い方も知りたい！」

という方は以下の記事も目を通してみてください〜！

【HTML、CSS、jQuery】オーバーレイとモーダルをシンプルに作る方法

【jQuery初心者向け】クリックした要素の背景色や文字色をtoggleClassメソッドで変更する方法