要素にマウスカーソルが乗ったとき及び要素からマウスカーソルが降りたときのイベントハンドラを指定する。
jQueryObject.hover(handlerIn, handlerOut)jQueryObject.hover(handlerInOut)以下に示す引数をjQueryオブジェクトのhoverメソッドに指定することができる。
<div id="d1">
ここにマウスカーソルを出し入れしてください。
</div>
<script>
let e = jQuery('#d1')
e.hover(function(){
e.text('mouseover')
}, function(){
e.text('mouseout')
})
</script>
jQuery の .hover() メソッドは、要素にマウスオーバーしたときとマウスアウトしたときの2つのイベントをまとめて扱うための便利なショートカットです。これを jQuery を使わずに実現するには、JavaScript の標準的なイベントリスナーである mouseenter と mouseleave イベントを使用します。
const element = document.getElementById('myElement');
if (element) {
// handlerIn に相当
element.addEventListener('mouseenter', function() {
// マウスが要素に入ったときに実行する処理
console.log('マウスが乗りました！');
// 例: スタイルの変更
this.style.backgroundColor = 'lightgray';
});
// handlerOut に相当
element.addEventListener('mouseleave', function() {
// マウスが要素から離れたときに実行する処理
console.log('マウスが離れました。');
// 例: スタイルを元に戻す
this.style.backgroundColor = '';
});
}mouseenter と似たイベントに mouseover がありますが、両者には重要な違いがあります。
mouseenter はマウスカーソルが要素に入ったときにのみ発生します。子要素にマウスが入ってもイベントは発生しません（バブリングしない）。
mouseover はマウスカーソルが要素に入ったときに発生し、さらに子要素にマウスが入ってもイベントが発生します（バブリングする）。
jQuery の .hover()メソッドは mouseenter と mouseleave イベントの組み合わせに相当するため、mouseover ではなく mouseenter を使うのが正しい代替手段となります。
もし、マウスホバー時のスタイルの変更のみが目的であれば、JavaScript を使用するよりも CSSの :hover 擬似クラスを使用する方がよりシンプルでパフォーマンスが高いです。
#myElement {
/* 通常時のスタイル */
background-color: white;
transition: background-color 0.3s ease; /* スムーズなアニメーション効果 */
}
#myElement:hover {
/* マウスホバー時のスタイル */
background-color: lightgray;
border: 1px solid black;
}この方法は、JavaScript でDOM操作を行うよりも効率的であり、アニメーションやトランジションも簡単に追加できます。
OpenJS Foundation (2022) .hover() | jQuery API Documentation