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

JavaScriptでマウスが要素をhover（ホバー）したかを判定。

hoverした時と離れた時で任意の処理を実行したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

hoverを判定するJavaScriptコード

// マウスで要素をhoverした時
document.querySelector('hover要素').addEventListener('mouseover', function() {
  //任意の処理
}

マウスで要素をhoverした時を判定。

任意の処理を実行するコード例です。

マウスの判定にはaddEventListenerを使います。

第一引数にmouseoverを指定。

第二引数で関数を定義します。

関数内でマウスでhoverした時に実行したい処理を記述。

以上で実装完了です。

// マウスが要素を離れた時
document.querySelector('hover要素').addEventListener('mouseleave', function() {
  //任意の処理
}

マウスで要素から離れた時を判定するJavaScriptコード例です。

前章同様、addEventListenerを使います。

第一引数をmouseleaveに変更すればOKです。

JavaScriptでマウスが要素をhoverしたか判定する方法について紹介しました。

以上で解説を終わります。