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

JavaScriptで参照先オブジェクトからthisが渡らない時の対処方法

2022.12.10
1301
JavaScript

JavaScriptでJSONデータを読み込み・HTMLへ出力する方法

2022.10.16
23947
JavaScript

【JavaScript】同じ文字列を指定した回数繰り返して表示する方法

2023.01.24
1179
JavaScript

JavaScriptでHTMLタグに属性を追加する方法

2023.01.08
7036