jQueryでマウスを乗せたときにイベントを発生させるhover()ですが、cssを使った処理や画像の切り替え、動的に生成した要素にhover()を効かせる方法などをご紹介します。
目次
hover()の使い方
マウスを乗せたら色を変える
まずはhover()を使ってマウスを乗せたら色を変えてみましょう。
HTML
|
1 |
<div>マウスは1ミッキー</div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { //マウスを乗せたら発動 $('div').hover(function() { //マウスを乗せたら色が変わる $(this).css('background', '#c00'); }); }); |
結果（動作サンプル）
下記ボタンにマウスを乗せると要素の色が変わるかと思います。
マウスは1ミッキー
色は変わりましたが、マウスを離しても色がそのままで元に戻ってくれません。
これでは使いものにならないでしょう。
次にご紹介するように、マウスを離したときのイベントも設定してあげれば、要素の色も元に戻ります。
参考：jQueryの$(this)の使い方
参考：jQueryでcssを追加、削除
マウスを離したら元の色に戻す
マウスを離したら色を戻すには、離したときの処理を追加してあげる必要があります。
HTML
|
1 |
<div>マウスは1ミッキー</div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function() { //マウスを乗せたら発動 $('div').hover(function() { //マウスを乗せたら色が変わる $(this).css('background', '#c00'); //ここにはマウスを離したときの動作を記述 }, function() { //色指定を空欄にすれば元の色に戻る $(this).css('background', ''); }); }); |
結果（動作サンプル）
下記ボタンにマウスを乗せて離すと、要素の色が変わりまた戻るかと思います。
マウスは1ミッキー
マウスを離しても色が元に戻ってくれますね。
基本構文
$( セレクタ ).hover(function() {
〜マウスを乗せたときの処理〜
}, function() {
〜マウスを離したときの処理〜
});
セレクタに続けてhover()を指定し、引数のfunction()はマウスを乗せたときと離したときの処理を、カンマ区切りで繋げます。
画像を切り替える
画像にマウスを乗せたら違う画像に切り替えてみましょう。
ボタンなどでよく使われますね。
画像ファイル
ファイル名の末尾に元画像は_off、切替後の画像には_onを付けています。
元画像：images/hover_off.png
切り替え画像：images/hover_on.png
HTML
|
1 2 |
<!--画像パスを指定--> <img src="images/hover_off.png" alt="クリック！"> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function() { //画像にマウスを乗せたら発動 $('img').hover(function() { //画像のsrc属性が別画像のパスに切り替わる $(this).attr('src', 'images/hover_on.png'); //ここにはマウスを離したときの動作を記述 }, function() { //画像のsrc属性を元の画像のパスに戻す $(this).attr('src', 'images/hover_off.png'); }); }); |
結果（動作サンプル）
下記画像にマウスを乗せて離すと、画像が切り替わるかと思います。
画像にマウスを乗せたらattr()を使って画像パスを丸ごと入れ替えています。
mouseover()との違い
hover()はmouseover()と違って、子要素から親要素へのバブリングが起きません。
バブリングとは、「ある要素でイベントが発生した際に、親や祖先要素にも同じイベントが発生する事」です。
「バブル（泡）」ということなんでしょうが、子要素でイベントが発生すると同じイベントが親要素で何回も繰り返されるんですね。
以下のサンプルでバブリングが再現できます。
HTML
|
1 2 3 |
<div class="box"> <div class="in">マウスは1ミッキー</div> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function() { //外側の要素にマウスを乗せたら発動 $('.box').mouseover(function() { //アニメーションしながらテキストサイズが大きくなる $(this).animate({fontSize : '24px'}, 500); //ここにはマウスを離したときの動作を記述 }).mouseout(function() { //アニメーションしながらテキストサイズが元のサイズに戻る $(this).animate({fontSize : '16px'}, 500); }); }); |
結果（動作サンプル）
内側の黄色い要素にマウスを乗せるとバブリングが起きるかと思います。
マウスは1ミッキー
バブリングで何回か揺れましたね。
内側の子要素から親要素へイベントが伝播し、親要素でも同じイベントが起こったためこのような動作になってしまいます。
hover()はバブリングが起きない
hover()はバブリングは起きないため、特別な理由がなければhover()を使えばよいでしょう。
動的に追加した要素のhoverイベント
上記のように最初から存在する要素では問題なく動作しますが、jQueryで追加した動的な要素は上記サンプルのようなhover()では動作しません。
以下サンプルでご確認ください。
動作しない普通のhover()
動的に追加した要素で、上記サンプルでご紹介したようなhover()を使っても以下のように何も起きません。
HTML
|
1 |
<button>クリック！</button> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(function() { //ボタンをクリックしたら発動 $('button').click(function() { //ボタンの横に要素を作成 $(this).after('<div id="hover">マウスは1ミッキー</div>') }); //上で生成した要素に普通のホバーイベントを発動 $('#hover').hover(function() { //マウスを乗せたら色が変わる $(this).css('background', '#c00'); //ここにはマウスを離したときの動作を記述 }, function() { //色指定を空欄にすれば元の色に戻る $(this).css('background', ''); }); }); |
結果（動作サンプル）
以下のボタンをクリックすると新しい要素が出てくるので、それにマウスを乗せてみてください。
何も動作しないはずです。
マウスを乗せても何も反応しませんが、DOM読み込み時にはまだ存在していなかった要素なので、動作しないんですね。
以下のようにon()を使えば動的に追加した要素でも動作します。
動作するon()を使ったhover()
今度は動的に追加した要素でon()を使ったので動作します。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
$(function() { //ボタンをクリックしたら発動 $('button').click(function() { //ボタンの横に要素を作成 $(this).after('<div id="hover">マウスは1ミッキー</div>') }); //上で生成した要素をon()を使って発動 $(document).on({ //マウスを乗せたときの動作 'mouseenter': function() { //マウスホバーした背景の色を変える $(this).css('background', 'red'); }, //マウスを離したときの動作 'mouseleave': function() { //色指定を空欄にすれば元の色に戻る $(this).css('background', ''); } //対象のセレクタを最後に追加 }, '#hover'); }); |
結果（動作サンプル）
以下のボタンをクリックすると新しい要素が出てくるので、それにマウスを乗せてみてください。
今度は背景色が変わるはずです。
変わりましたか？
on()を使うとhover()が使えないため、mouseenter()とmouseleave()を使います。
hover()はmouseenter()とmouseleave()を1つにしたメソッドなので、特に違いはありません。
on()は複数のメソッドも指定できるため、上記サンプルのようにfunction()をカンマ区切りで繋げ、最後に対象のセレクタを指定しています。
on()で設定するセレクタは静的な祖先要素であれば動作するので、documentじゃなく直近の親要素を指定するとパフォーマンスも若干良くなるでしょう
動的に追加したクリックイベントではon()を使いましょう。
これは分かりやすい
コメントありがとうございます。
これからも分かりやすい記事作成を心がけてまいります。
とても解りやすいです!
こんな書籍ばかりだと、学校教育も変わりそうですね。
これからも宜しくお願いします。
ありがとうございます。
どなたでも理解できるような分かりやすい記事を今後とも書いてまいります。
各説明が普段使う言葉で書かれていますので、わかりやすいです。
お気に入りに入れさせていただきました。
ところで、jQueryを使ったウェブサイトを作成するには
どのエディタが良いのでしょうか？もしよろしければ教えてください。
LiveWeave はHTML,CSS,JavaScript(JQ)と結果画面が見やすいですが、既存のファイルは読み込みできないようです。
Chrome はエラー行を表示してくれますが、HTMLファイルは修正保存ができないようです。
SubLime やbranket,VisualStudio といった本格的なエディタは使い方がよくわからないでいます。
コメントありがとうございます。
自分はSublimeTextを使っていますが、とても使いやすくていいですよ。
こちらに導入方法から使い方が載ってますので参考にされてみてください。
https://eng-entrance.com/sublimetext-start
他にはVisualStudioCodeも人気ですね。
ありがとうございます。参考にさせていただきます。