JavaScriptでマウスが要素をhoverしたか判定する方法

JavaScriptでマウスが要素をhover(ホバー)したかを判定。
hoverした時と離れた時で任意の処理を実行したい。
本記事ではこのような悩みを解決。
実装方法について解説します。
hoverを判定するJavaScriptコード
// マウスで要素をhoverした時
document.querySelector('hover要素').addEventListener('mouseover', function() {
//任意の処理
}
マウスで要素をhoverした時を判定。
任意の処理を実行するコード例です。
マウスの判定にはaddEventListenerを使います。
第一引数にmouseoverを指定。
第二引数で関数を定義します。
関数内でマウスでhoverした時に実行したい処理を記述。
以上で実装完了です。
離れた時を判定するJavaScriptコード
// マウスが要素を離れた時
document.querySelector('hover要素').addEventListener('mouseleave', function() {
//任意の処理
}
マウスで要素から離れた時を判定するJavaScriptコード例です。
前章同様、addEventListenerを使います。
第一引数をmouseleaveに変更すればOKです。
まとめ
JavaScriptでマウスが要素をhoverしたか判定する方法について紹介しました。
以上で解説を終わります。
目次