こんにちは、ライターのマサトです！
今回は、jQueryからマウスオーバーの処理を簡単に実現できる「hover()」メソッドについて学習していきましょう！
この記事では、
・「hover()」とは？
・CSSを変えてみよう！
・1つの関数だけで使う
・「hover()」を解除する
という基本的な内容から、
・「on」を活用したhoverの実現
・hover()が効かない理由とは？
などの応用的な使い方に関しても解説していきます。
この記事で、「hover()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
| この記事の目次 1 「hover()」とは？ 1.1 CSSを変えてみよう！ 1.2 1つの関数だけで使う 1.3 「hover()」を解除する 2 「on」を活用したhoverの実現 3 hover()が効かない理由とは？ 4 まとめ |
「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()イベント処理は解除されるわけです。
'IT' 카테고리의 다른 글
| 모던 웹을 위한 Node.js 프로그래밍 3판[1차] (0) | 2021.07.06 |
|---|---|
| JSPベスト・プラクティス: タイム・スタンプの力 (0) | 2021.07.05 |
| Android開発でList Viewを使おう！ (0) | 2021.07.05 |
| JavaScriptでStringオブジェクトを使う方法【初心者向け】 (0) | 2021.07.05 |
| https://nodejs.org/api/all.html (0) | 2021.07.05 |
댓글