jQueryのhover()を活用したマウス操作まとめ!

こんにちは、ライターのマサトです!

今回は、jQueryからマウスオーバーの処理を簡単に実現できる「hover()」メソッドについて学習していきましょう!

この記事では、

・「hover()」とは?
・CSSを変えてみよう!
・1つの関数だけで使う
・「hover()」を解除する

という基本的な内容から、

・「on」を活用したhoverの実現
・hover()が効かない理由とは?

などの応用的な使い方に関しても解説していきます。

この記事で、「hover()」メソッドをしっかり学習して自分のスキルアップを目指しましょう!

「hover()」とは?

それでは、まず最初に「hover()」メソッドについて基本的な知識から学んでいきましょう!

「hover()」は、特定のHTML要素内にマウスカーソルが重なっているかどうかを判断することができます。

これは、「mouseenter / mouseleave」メソッドを1つにまとめた機能と考えても良いでしょう。

「hover()」を使えば、ドロップダウンメニューツールチップなどユーザビリティの高いWebサイトを構築できるのが特徴です。

本記事では、「hover()」について基本から応用技まで解説し、間違いやすいポイントもまとめましたのでぜひ参考にしてみてください!

CSSを変えてみよう!

ここからは、「hover()」を使ったプログラミング手法を実際に学んでいきましょう!

一般的な記述方法としては、【 対象要素.hover( 関数1, 関数2 ) 】のように引数へ関数を指定します。

「関数1」が対象要素とマウスカーソルが重なった時の処理で、「関数2」が離れた時の処理を記述することになっています。

JavaScriptコードにすると次のようになります!

このように、1つ目の関数内にマウスカーソルが重なった時の処理を記述し、2つ目の関数に離れた時の処理を記述するわけです。

上記内容を踏まえた上で、簡単なサンプルを作ってみましょう!

この例ではボタン要素を1つ配置しており、このボタンにマウスカーソルが重なっているかどうかを判断させています。

カーソルが重なった場合と離れた場合で、「css()」メソッドを使ったボタンの背景色を変化させています。

カーソルが重なると次のように背景色が「青色」に変わります。
jquery-hover-img1

また、カーソルが離れると背景色が「赤色」に変わります。
jquery-hover-img2

このように、「hover()」メソッドを使うことでマウスオーバーの処理を簡単に実現できるわけです!

1つの関数だけで使う

先ほどは「hover()」の引数に2つの関数を指定しましたが、実は1つだけでも動作するようになっています。

この場合、マウスカーソルが要素に重なった時も離れた時も同じ関数が実行されるという点に注意しましょう。

逆に言えば、どちらのケースでも同じ関数を実行したい場合には最適な記述方法になります。

次のサンプル例を見てください!

この例ではhover()に1つだけの関数を指定し、カーソルが重なった時と離れた時に同じ関数が実行されるようにしています。

関数内は、ボタンの背景色を配列で用意してランダムに色が変化するようにしています。

つまり、マウスカーソルが重なった時と離れた時にランダムな背景色に変化するボタンを作っているわけですね。

「hover()」を解除する

今度は、設定した「hover()」メソッドのイベント処理を解除する方法について見ていきましょう!

一般的にはイベント処理を解除するための「off()」メソッドがjQueryで用意されています。

しかし、次のように記述してもhover()は解除されません!

冒頭でも少し解説しましたが、hover()メソッドはあくまでも「mouseenter / mouseleave」を1つにまとめたメソッドなのです。

そのため、hover()のイベント処理を解除するには次のように記述しましょう!

このように、「mouseenter / mouseleave」をそれぞれ「off()」メソッドで実行することで、hover()イベント処理は解除されるわけです。

「on」を活用したhoverの実現

さて、先ほどhover()は「mouseenter / mouseleave」メソッドを1つにまとめたものと説明しました。

これは、別の言い方をすればhover()と同じことを「mouseenter / mouseleave」で実現できるという意味にもなります。

そこで、「on()」メソッドを活用してhover()と同じ機能を持たせる方法について見ていきましょう!

「on()」は、【 対象要素.on( イベント処理, イベント処理, イベント処理・・・ ) 】のように引数へ複数のイベント処理を記述できます。

この特徴を活用すれば、簡単にhover()を同じイベント処理を実現できます!

この例では、on()メソッドの引数に「mouseenter / mouseleave」のイベント処理をそれぞれ指定しています。

これにより、マウスカーソルが要素に重なった時は「mouseenter」が実行され、離れた時は「mouseleave」が実行されるわけです。

ちなみに、「on()」メソッドについての基本的な知識や更なる活用技については、次の記事で詳しく解説しているのでぜひ参考にしてみてください!

【jQuery入門】on()によるイベント処理の使い方まとめ!
更新日 : 2019年7月11日

hover()が効かない理由とは?

ある条件が重なると「hover()」が上手く動作しない現象が発生するのでご紹介しておきます!

その「ある条件」とは、あとからjQueryによって追加された要素にhover()を実行しようとした場合です。

次のサンプル例を見てください!

この例では、「append()」を使ってあとからボタン要素を追加しているのが分かります。

このボタンに対してhover()を使ったイベント処理を実行しているのですが、このままでは動作しません。

なぜなら、プログラムは上から下へ実行されるので、hover()を実行した時に「ボタン要素」がまだ存在していないからです。

その証拠に、「append()」をhover()の前に記述すれば上手く動作するのです。

しかし、いちいち実行順序を考えながらプログラミングするのは面倒ですし、バグを生み出すきっかけにもなりかねません。

そこで活用したいのが「on()」メソッドです!

前章でもご紹介しましたが、「on()」を使ってhover()と同じ機能を実装することができます。

しかも、「on()」メソッドはあとから追加された要素に対してもイベント処理を実行できる特徴を兼ね備えています。

次のサンプル例を見てください!

この例では、「append()」を使ってあとから「ボタン要素」を追加して「on()」によってイベント処理が紐付けられています。

注目すべきはon()の記述方法で、【 on( イベント処理, イベント処理, 対象要素 ) 】のように引数の最後に対象要素を指定していますよね?

今回の場合だとボタン要素にイベント処理を紐付けたいので「button」が引数に指定されています。

これにより、あとからボタン要素を追加しても上手くイベント処理が実行されるというわけです。

まとめ

今回は、jQueryでマウスオーバーのイベント処理を簡単に実現できる「hover()」について学習しました!

最後に、もう一度ポイントをおさらいしておきましょう!

・hover()は「mouseenter / mouseleave」を1つにまとめたメソッドである
・hover()を解除するには「off( mouseenter, mouseleave )」と記述しよう
・on()を使ってもhover()と同じ機能を実装することができる
・あとから追加した要素にhover()を実行したいならon()を活用しよう

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説