jQueryでマウスオーバー時に画像を切り替える方法です。

Contents

  1. .hover()で画像を切り替える
  2. CSSで画像を切り替える
  3. .hover()でアニメーションさせながら画像を切り替える

.hover()で画像を切り替える

あらかじめ、使用する画像に「img_on.png」と「img_off.png」というように_onと_offを付けたものを用意しておきます。そして、jQueryを使用してhover時にこれらの画像を切り替えるように設定していきます。

HTMLは以下のように記述して、js-hoverというclassを付けています。

<a href="#" class="js-hover">
  <img src="https://gri-t.com/sample/images/button_off.png" alt="">
</a>

sample1は.hover()を使用して、画像にマウスオーバーしたら、srcを_offから_onに切り替わるように設定しています。

See the Pen
jQuery hover img change by gri-t (@gri-t)
on CodePen.

CSSで画像を切り替える

先ほどの例だと、画像がパッと切り変わってしまっていたので、ふわっとアニメーションさせながら切り変わるようにしたいという場合はCSSで実装するのが簡単かと思います。

画像は先ほどと同様、onとoffの画像を二枚用意し、重ねて表示させます。

<a href="#" class="rollover">
  <img class="on" src="https://gri-t.com/sample/images/button_on.png" alt="">
  <img class="off" src="https://gri-t.com/sample/images/button_off.png" alt="">
</a>

下記のSample2の例では、on画像の上にoff画像が重なっていて、hoverしたら、offがopacity: 0になるように設定しています。

See the Pen
jQuery hover img change by gri-t (@gri-t)
on CodePen.

.hover()でアニメーションさせながら画像を切り替える

jQueryでもCSSのようにふわっとアニメーションさせた場合、.animate()を使ってopacityを変化させることで実装可能です。

<a href="#" class="js-hover-fade">
  <img src="https://gri-t.com/sample/images/button_off.png" alt="">
</a>

Sample3では、off画像の前に.before()を使って、styleでopacity: 0を指定したon画像を追加します。そして、.animate()でふわっと切り替えます。

See the Pen
jQuery hover img change by gri-t (@gri-t)
on CodePen.

以上、マウスオーバー時に画像を切り替える方法でした。