jQuery hoverイベント：要素にマウスを乗せる/離すイベントを制御
jQuery の hover() メソッドを使うと、マウスポインタを要素とその子要素の上に乗せたり、離したりしたときに発生するイベントを簡単に処理できます。この記事では、hover() メソッドの使い方、構文、実用的な例、よくある質問などを詳しく解説します。
目次
hover() メソッドの基本
hover() メソッドは、2つの関数を受け取ります。1つ目はマウスポインタが要素の上に乗ったときに実行される関数、2つ目はマウスポインタが要素から離れたときに実行される関数です。
構文
$(selector).hover(handlerIn, handlerOut)selector: イベントをバインドする要素を選択します。handlerIn: マウスポインタが要素の上に乗ったときに実行される関数。handlerOut: マウスポインタが要素から離れたときに実行される関数。
簡単な例
以下の例では、マウスポインタをid="example"の要素に乗せると背景色が黄色に変わり、マウスポインタを離すと元の灰色に戻ります。
<style>
#example {
background-color: #ccc;
padding: 20px;
}
</style>
<div id="example">マウスを乗せてみてください</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#example").hover(
function(){
$(this).css("background-color", "yellow");
},
function(){
$(this).css("background-color", "#ccc");
}
);
});
</script>hover() メソッドの高度な使い方
1つの関数だけを指定して、マウスオーバーとマウスアウトの両方のイベントを処理することもできます。
構文
$(selector).hover(handlerInOut)handlerInOut: マウスポインタが要素の上に乗ったときと離れたときの両方に実行される関数。
例：要素にクラスを追加/削除して、CSSで異なるスタイルを適用する方法。
<style>
#example {
padding: 20px;
}
.highlight {
background-color: yellow;
}
</style>
<div id="example">マウスを乗せてみてください</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#example").hover(
function(){
$(this).addClass("highlight");
},
function(){
$(this).removeClass("highlight");
}
);
});
</script>hover() メソッドの実用的な例
hover() メソッドは、様々な場面で使うことができます。例えば、
- ドロップダウンメニュー：マウスオーバー時にサブメニューを表示、マウスアウト時に非表示にする。
- ツールチップ：マウスオーバー時に要素に関する追加情報を表示。
- 画像ギャラリー：マウスオーバー時に画像を拡大表示。
hover() メソッドに関するよくある質問
- hover() メソッドと mouseenter()/mouseleave() メソッドの違いは？
- hover() メソッドは、mouseenter() と mouseleave() を組み合わせたショートカットです。mouseenter() は要素に入った時のみ、mouseleave() は要素から出た時のみイベントが発生しますが、hover() は両方の場合でイベントが発生します。
- タッチイベントでは hover() メソッドはどのように動作しますか？
- タッチデバイスでは、hover() メソッドは期待通りに動作しないことがあります。これは、タッチイベントとマウスイベントの扱いが異なるためです。タッチデバイスでは、touchstart、touchend などのイベントを使用する方が良いでしょう。
- パフォーマンスを向上させるために hover() メソッドを最適化するにはどうすればよいですか？
- hover() メソッドを多数の要素にバインドすると、パフォーマンスが低下する可能性があります。パフォーマンスを向上させるためには、イベントデリゲーションを使用したり、hover() メソッドの使用を必要最小限に抑えたりすることが有効です。
参考文献
その他の参考記事:hover tooltip jquery