こんにちは、ライターのマサトです！
今回は、jQueryからマウスオーバーの処理を簡単に実現できる「hover()」メソッドについて学習していきましょう！
この記事では、
・「hover()」とは？
・CSSを変えてみよう！
・1つの関数だけで使う
・「hover()」を解除する
という基本的な内容から、
・「on」を活用したhoverの実現
・hover()が効かない理由とは？
などの応用的な使い方に関しても解説していきます。
この記事で、「hover()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「hover()」とは？
それでは、まず最初に「hover()」メソッドについて基本的な知識から学んでいきましょう！
「hover()」は、特定のHTML要素内にマウスカーソルが重なっているかどうかを判断することができます。
これは、「mouseenter / mouseleave」メソッドを1つにまとめた機能と考えても良いでしょう。
「hover()」を使えば、ドロップダウンメニューやツールチップなどユーザビリティの高いWebサイトを構築できるのが特徴です。
本記事では、「hover()」について基本から応用技まで解説し、間違いやすいポイントもまとめましたのでぜひ参考にしてみてください！
CSSを変えてみよう！
ここからは、「hover()」を使ったプログラミング手法を実際に学んでいきましょう！
一般的な記述方法としては、【 対象要素.hover( 関数１, 関数２ ) 】のように引数へ関数を指定します。
「関数１」が対象要素とマウスカーソルが重なった時の処理で、「関数２」が離れた時の処理を記述することになっています。
JavaScriptコードにすると次のようになります！
$('button').hover(
function() {
//マウスカーソルが重なった時の処理
},
function() {
//マウスカーソルが離れた時の処理
}
);
このように、1つ目の関数内にマウスカーソルが重なった時の処理を記述し、2つ目の関数に離れた時の処理を記述するわけです。
上記内容を踏まえた上で、簡単なサンプルを作ってみましょう！
<body>
<button>ボタン</button>
<script>
$('button').hover(
function() {
//マウスカーソルが重なった時の処理
$('button').css('background-color', '#00f');
},
function() {
//マウスカーソルが離れた時の処理
$('button').css('background-color', '#f00');
}
);
</script>
</body>
この例ではボタン要素を1つ配置しており、このボタンにマウスカーソルが重なっているかどうかを判断させています。
カーソルが重なった場合と離れた場合で、「css()」メソッドを使ったボタンの背景色を変化させています。
カーソルが重なると次のように背景色が「青色」に変わります。
また、カーソルが離れると背景色が「赤色」に変わります。
このように、「hover()」メソッドを使うことでマウスオーバーの処理を簡単に実現できるわけです！
1つの関数だけで使う
先ほどは「hover()」の引数に2つの関数を指定しましたが、実は1つだけでも動作するようになっています。
この場合、マウスカーソルが要素に重なった時も離れた時も同じ関数が実行されるという点に注意しましょう。
逆に言えば、どちらのケースでも同じ関数を実行したい場合には最適な記述方法になります。
次のサンプル例を見てください！
<body>
<button>ボタン</button>
<script>
$('button').hover(
function() {
//カラーパレットの用意
var colors = ['#f00', '#0f0', '#00f', '#f0f', '#0ff', '#ff0'];
//乱数を生成する
var rnd = Math.floor(Math.random() * colors.length);
//背景色を変更する
$('button').css('background-color', colors[rnd]);
}
);
</script>
</body>
この例ではhover()に1つだけの関数を指定し、カーソルが重なった時と離れた時に同じ関数が実行されるようにしています。
関数内は、ボタンの背景色を配列で用意してランダムに色が変化するようにしています。
つまり、マウスカーソルが重なった時と離れた時にランダムな背景色に変化するボタンを作っているわけですね。
「hover()」を解除する
今度は、設定した「hover()」メソッドのイベント処理を解除する方法について見ていきましょう！
一般的にはイベント処理を解除するための「off()」メソッドがjQueryで用意されています。
しかし、次のように記述してもhover()は解除されません！
$('button').off('hover');
冒頭でも少し解説しましたが、hover()メソッドはあくまでも「mouseenter / mouseleave」を1つにまとめたメソッドなのです。
そのため、hover()のイベント処理を解除するには次のように記述しましょう！
$('button').off('mouseenter mouseleave');
このように、「mouseenter / mouseleave」をそれぞれ「off()」メソッドで実行することで、hover()イベント処理は解除されるわけです。
「on」を活用したhoverの実現
さて、先ほどhover()は「mouseenter / mouseleave」メソッドを1つにまとめたものと説明しました。
これは、別の言い方をすればhover()と同じことを「mouseenter / mouseleave」で実現できるという意味にもなります。
そこで、「on()」メソッドを活用してhover()と同じ機能を持たせる方法について見ていきましょう！
「on()」は、【 対象要素.on( イベント処理, イベント処理, イベント処理・・・ ) 】のように引数へ複数のイベント処理を記述できます。
この特徴を活用すれば、簡単にhover()を同じイベント処理を実現できます！
<body>
<button>ボタン</button>
<script>
$('button').on({
'mouseenter': function() {
console.log('マウスが重なった！');
},
'mouseleave': function() {
console.log('マウスが離れた！');
}
})
</script>
</body>
この例では、on()メソッドの引数に「mouseenter / mouseleave」のイベント処理をそれぞれ指定しています。
これにより、マウスカーソルが要素に重なった時は「mouseenter」が実行され、離れた時は「mouseleave」が実行されるわけです。
ちなみに、「on()」メソッドについての基本的な知識や更なる活用技については、次の記事で詳しく解説しているのでぜひ参考にしてみてください！
hover()が効かない理由とは？
ある条件が重なると「hover()」が上手く動作しない現象が発生するのでご紹介しておきます！
その「ある条件」とは、あとからjQueryによって追加された要素にhover()を実行しようとした場合です。
次のサンプル例を見てください！
<body>
<script>
$('button').hover(
function() {
console.log('重なった');
},
function() {
console.log('離れた');
}
)
$('body').append('<button>ボタン</button>');
</script>
</body>
この例では、「append()」を使ってあとからボタン要素を追加しているのが分かります。
このボタンに対してhover()を使ったイベント処理を実行しているのですが、このままでは動作しません。
なぜなら、プログラムは上から下へ実行されるので、hover()を実行した時に「ボタン要素」がまだ存在していないからです。
その証拠に、「append()」をhover()の前に記述すれば上手く動作するのです。
しかし、いちいち実行順序を考えながらプログラミングするのは面倒ですし、バグを生み出すきっかけにもなりかねません。
そこで活用したいのが「on()」メソッドです！
前章でもご紹介しましたが、「on()」を使ってhover()と同じ機能を実装することができます。
しかも、「on()」メソッドはあとから追加された要素に対してもイベント処理を実行できる特徴を兼ね備えています。
次のサンプル例を見てください！
<body>
<script>
$('body').on({
mouseenter: function() {
console.log('重なった');
},
mouseleave: function() {
console.log('離れた');
}
}, 'button')
$('body').append('<button>ボタン</button>');
</script>
</body>
この例では、「append()」を使ってあとから「ボタン要素」を追加して「on()」によってイベント処理が紐付けられています。
注目すべきはon()の記述方法で、【 on( イベント処理, イベント処理, 対象要素 ) 】のように引数の最後に対象要素を指定していますよね？
今回の場合だとボタン要素にイベント処理を紐付けたいので「button」が引数に指定されています。
これにより、あとからボタン要素を追加しても上手くイベント処理が実行されるというわけです。
まとめ
今回は、jQueryでマウスオーバーのイベント処理を簡単に実現できる「hover()」について学習しました！
最後に、もう一度ポイントをおさらいしておきましょう！
・hover()は「mouseenter / mouseleave」を1つにまとめたメソッドである
・hover()を解除するには「off( mouseenter, mouseleave )」と記述しよう
・on()を使ってもhover()と同じ機能を実装することができる
・あとから追加した要素にhover()を実行したいならon()を活用しよう
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
