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

2019-08-252020-09-07JavaScript イベント,JavaScript

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

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

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

動作サンプル

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

サンプルコード

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

//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を使ったマウスホバー系イベントトリガーの一覧です。