Written by Kasumi

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したか判定する方法について紹介しました。

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

目次

関連記事

JavaScript

HTMLのformでsubmitした時、ページ遷移させない方法【JavaScript】

2022.10.09
1985
JavaScript

JavaScriptでDOM(HTML)・画像の読み込み完了時に任意の処理を実行する方法

2022.12.26
437
JavaScript

JavaScriptを使い、デバイス幅によって条件分岐する方法【jQuery不要】

2022.10.20
744
JavaScript

disabledを使って任意のinput要素を入力無効にする方法【条件判定で解除する】

更新日:2022.09.09
2166