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でJSONデータを読み込み・HTMLへ出力する方法

2022.10.16
639
JavaScript

【JavaScript】スプレット構文(…)を使い、配列・オブジェクトを追加・連結(マージ)する方法

2022.12.04
338
JavaScript

JavaScriptを使い、目次をプラグイン無しで自動生成する方法

2022.10.31
220
JavaScript

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

更新日:2022.09.09
913