JavaScriptでマウスホバーイベントを実装する方法

JavaScriptイベント

JavaScriptを使って指定した要素に対してマウスホバー(マウスオーバー)イベントを実装する方法です。

マウスホバーイベントを実装する方法

JavaScriptを使って指定した要素に対してマウスホバー(マウスオーバー)イベントはaddEventListener()関数を利用することで実装する事が可能です。

動作サンプル

See the Pen JavaScript hover on class to get id by yochans (@yochans) on CodePen.

HTML

<div id="target">target</div>

JavaScript

//target要素を指定
const target = document.getElementById('target');

//マウスが要素上に入った時
target.addEventListener('mouseover', () => {
  
  target.style.background = '#000000';
  
}, false);

//マウスが要素上から離れた時
target.addEventListener('mouseleave', () => {
  
  target.style.background = '#0091EA';
  
}, false);

コード説明

addEventListenerによるマウスホバーイベントのトリガーは、mouseoverでマウスカーソルが要素上に入った時を検出、mouseleaveで要素上から離れた時を検出して実装します。

マウスホバーイベントでCSSなどを変更した場合、離れた場合に変更した部分が自然に元の値に戻る訳ではないので注意です。

マウスホバー系イベントの種類

addEventListenerを使ったマウスホバー系イベントトリガーの一覧です。

mouseoverマウスカーソルが要素の中に移動した時
mouseenterマウスカーソルが要素上を移動した時(連続性はない)
mousemoveマウスカーソルが要素上を移動した時(連続性がある)
mouseoutマウスカーソルが要素の外に移動した時
mouseleaveマウスカーソルが要素の外に移動した時

JavaScriptイベント

Posted by Yousuke.U