jQueryのhover()でマウスオーバーの処理

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryでマウスを乗せたときにイベントを発生させるhover()ですが、cssを使った処理や画像の切り替え、動的に生成した要素にhover()を効かせる方法などをご紹介します。

hover()の使い方

マウスを乗せたら色を変える

まずはhover()を使ってマウスを乗せたら色を変えてみましょう。

HTML

jQuery

結果(動作サンプル)

下記ボタンにマウスを乗せると要素の色が変わるかと思います。

マウスは1ミッキー

色は変わりましたが、マウスを離しても色がそのままで元に戻ってくれません。

これでは使いものにならないでしょう。

次にご紹介するように、マウスを離したときのイベントも設定してあげれば、要素の色も元に戻ります。

参考:jQueryの$(this)の使い方
参考:jQueryでcssを追加、削除

マウスを離したら元の色に戻す

マウスを離したら色を戻すには、離したときの処理を追加してあげる必要があります。

HTML

jQuery

結果(動作サンプル)

下記ボタンにマウスを乗せて離すと、要素の色が変わりまた戻るかと思います。

マウスは1ミッキー

マウスを離しても色が元に戻ってくれますね。

基本構文

$( セレクタ ).hover(function() {
  〜マウスを乗せたときの処理〜
}, function() {
  〜マウスを離したときの処理〜
});

セレクタに続けてhover()を指定し、引数のfunction()はマウスを乗せたときと離したときの処理を、カンマ区切りで繋げます。

画像を切り替える

画像にマウスを乗せたら違う画像に切り替えてみましょう。

ボタンなどでよく使われますね。

画像ファイル

ファイル名の末尾に元画像は_off、切替後の画像には_onを付けています。

元画像:images/hover_off.png
切り替え画像:images/hover_on.png

HTML

jQuery

結果(動作サンプル)

下記画像にマウスを乗せて離すと、画像が切り替わるかと思います。


クリック


画像にマウスを乗せたらattr()を使って画像パスを丸ごと入れ替えています。

mouseover()との違い

hover()mouseover()と違って、子要素から親要素へのバブリングが起きません。

バブリングとは、「ある要素でイベントが発生した際に、親や祖先要素にも同じイベントが発生する事」です。

出典:[jQuery]イベントのバブリングって何? | たねっぱ!

「バブル(泡)」ということなんでしょうが、子要素でイベントが発生すると同じイベントが親要素で何回も繰り返されるんですね。

以下のサンプルでバブリングが再現できます。

HTML

jQuery

結果(動作サンプル)

内側の黄色い要素にマウスを乗せるとバブリングが起きるかと思います。

マウスは1ミッキー

バブリングで何回か揺れましたね。

内側の子要素から親要素へイベントが伝播し、親要素でも同じイベントが起こったためこのような動作になってしまいます。

hover()はバブリングが起きない

hover()はバブリングは起きないため、特別な理由がなければhover()を使えばよいでしょう。

動的に追加した要素のhoverイベント

上記のように最初から存在する要素では問題なく動作しますが、jQueryで追加した動的な要素は上記サンプルのようなhover()では動作しません。

以下サンプルでご確認ください。

動作しない普通のhover()

動的に追加した要素で、上記サンプルでご紹介したようなhover()を使っても以下のように何も起きません。

HTML

jQuery

結果(動作サンプル)

以下のボタンをクリックすると新しい要素が出てくるので、それにマウスを乗せてみてください。

何も動作しないはずです。

マウスを乗せても何も反応しませんが、DOM読み込み時にはまだ存在していなかった要素なので、動作しないんですね。

以下のようにon()を使えば動的に追加した要素でも動作します。

動作するon()を使ったhover()

今度は動的に追加した要素でon()を使ったので動作します。

jQuery

結果(動作サンプル)

以下のボタンをクリックすると新しい要素が出てくるので、それにマウスを乗せてみてください。

今度は背景色が変わるはずです。

変わりましたか?

on()を使うとhover()が使えないため、mouseenter()mouseleave()を使います。

hover()mouseenter()mouseleave()を1つにしたメソッドなので、特に違いはありません。

on()は複数のメソッドも指定できるため、上記サンプルのようにfunction()をカンマ区切りで繋げ、最後に対象のセレクタを指定しています。

on()で設定するセレクタは静的な祖先要素であれば動作するので、documentじゃなく直近の親要素を指定するとパフォーマンスも若干良くなるでしょう

動的に追加したクリックイベントではon()を使いましょう。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント

  1. 名無し より:

    これは分かりやすい

    1. flatFlag より:

      コメントありがとうございます。
      これからも分かりやすい記事作成を心がけてまいります。

  2. kozo より:

    とても解りやすいです!
    こんな書籍ばかりだと、学校教育も変わりそうですね。
    これからも宜しくお願いします。

    1. flatFlag より:

      ありがとうございます。
      どなたでも理解できるような分かりやすい記事を今後とも書いてまいります。

  3. カツくん より:

     各説明が普段使う言葉で書かれていますので、わかりやすいです。
    お気に入りに入れさせていただきました。

     ところで、jQueryを使ったウェブサイトを作成するには
    どのエディタが良いのでしょうか?もしよろしければ教えてください。
    LiveWeave はHTML,CSS,JavaScript(JQ)と結果画面が見やすいですが、既存のファイルは読み込みできないようです。
    Chrome はエラー行を表示してくれますが、HTMLファイルは修正保存ができないようです。
    SubLime やbranket,VisualStudio といった本格的なエディタは使い方がよくわからないでいます。

    1. flatFlag より:

      コメントありがとうございます。
      自分はSublimeTextを使っていますが、とても使いやすくていいですよ。
      こちらに導入方法から使い方が載ってますので参考にされてみてください。
      https://eng-entrance.com/sublimetext-start
      他にはVisualStudioCodeも人気ですね。

      1. カツくん より:

        ありがとうございます。参考にさせていただきます。

コメントを残す

*