こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在5社経験している、15年目エンジニアです。
この記事では、 jQueryでカーソルが要素に乗ったときと離れたときのイベントを指定できるhoverメソッドについて
- hoverメソッドとは
- hoverメソッドを使ったサンプルプログラム
と、丁寧に解説していきます。
前提条件：実行環境について
実行環境は以下の通りです。
| OS | Windows11 |
|---|---|
| jQueryのバージョン | 3.7.1 |
hoverメソッドとは
hoverメソッドとは、マウスカーソルがHTML要素に乗ったとき（マウスオーバー）と、離れたとき（マウスアウト）のイベントを指定できるメソッドです。
hoverメソッドの基本的な書き方は
|
1 2 3 4 5 6 7 8 |
$(【セレクタ】).hover( function() { // マウスカーソルがHTML要素に乗ったときの処理 }, function() { // マウスカーソルがHTML要素から離れたときの処理 } ); |
です。
セレクタについては、こちらの記事をご参考ください。
では、次の章で実際に使ってみます。
hoverメソッドを解説するプログラムの概要
hoverメソッドを解説するプログラムでは、HTML要素を3つ用意します。
そのうち2つにはhoverメソッドでイベントを指定して、残り1つは何も指定しません。
マウスカーソルが動いたときの動きを確認します。
ディレクトリ構成は以下の画像のようになっています。
HTMLサンプルプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>hoverメソッドサンプル</title> <script src="./js/jquery-3.7.1.min.js"></script> <script src="./js/sample.js"></script> </head> <body> <p id="cat">ねこ</p> <p id="dog">いぬ</p> <p id="pigeon">はと</p> </body> </html> |
JavaScriptサンプルプログラム
|
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 |
/** * ねこにカーソルが重なった時背景色を変更する */ $(function() { $("#cat").hover( function() { $("#cat").css('background-color', "#0cb0e0") }, function() { $("#cat").css('background-color', "") } ); }) /** * いぬにカーソルが重なった時背景色を変更する */ $(function() { $("#dog").hover( function() { $("#dog").css('background-color', "#ff7f50") }, function() { $("#dog").css('background-color', "") } ); }) |
実行結果
作成したHTMLをブラウザで開きます。
初期表示は、こんな感じです。
カーソルが要素に重なってないので、背景色は変わってません。
「ねこ」にカーソルを合わせると青に背景色が変わりました。
「ねこ」からカーソルを話すと背景色がなくなりました。
次に「いぬ」がオレンジに背景色が変わりました。
「いぬ」からカーソルを話すと背景色がなくなりました。
「はと」には何も設定していないので、カーソルを重ねても何も起きないことが確認できました。
まとめ：hoverメソッドを使ってみよう
以上がjQueryのhoverメソッドについての解説でした！
あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ
コメント