【JavaScript】マウスオーバー(ホバー)をトリガーにしたイベント

2018年3月14日JavaScriptイベント

要素上でのマウスオーバー(ホバー)をトリガーとしたイベントサンプルです

CSSで言うところの:hoverですが、マウスカーソルが要素上に入った時・入っている時・動いている時・離れた時など、様々なトリガーが存在します

JavaScript・jQueryそれぞれのサンプルコードをメモ

JavaScript:(on)mouse系イベント一覧

(on)mouse系イベント一覧
mouseover 要素の中に移動した時
mouseenter 要素上を移動した時(連続性はない)
mousemove 要素上を移動した時(連続性がある)
mouseout 要素の外に移動した時
mouseleave 要素の外に移動した時

またマウスホバーイベントには使わないですが、mouse~と名付けられたイベントには以下のものもありますがクリックを対象としたイベントとなっています

onmousedown マウスのいずれかのボタンが押された時
onmouseup マウスのいずれかのボタンが離された時

JavaScript:マウスオーバー(ホバー)イベント動作サンプル

See the Pen JavaScript hover ivent(jQuery) by yochans (@yochans) on CodePen.

JavaScript:マウスオーバー(ホバー)イベントのサンプルコード

HTML

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

JavaScript

const target = document.getElementById('target');

//ON
target.addEventListener('mouseenter', () => {
  target.style.color = "red";
}, false);

//OUT
target.addEventListener('mouseleave', () => {
  target.style.color = "white";
  
}, false);

jQuery:マウスホバー系イベント一覧

Jqueryではhover()などの処理が用意されています

マウスホバー系イベント一覧
mouseover() 要素の中に移動した時
mouseenter() 要素上を移動した時(連続性はない)
mousemove() 要素上を移動した時(連続性がある)
mouseout() 要素の外に移動した時
mouseleave() 要素の外に移動した時
hover() mouseenter() とmouseleave() を同時に

多くの動作はhover() で実装できます

hover(入った時の処理,離れた時の処理)

Jquery:マウスオーバー(ホバー)イベント動作サンプル

See the Pen JavaScript Mouse hover ivent(jQuery) by yochans (@yochans) on CodePen.

HTML

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

jQuery

 $('#target').hover( () => {
 
  $('#target').css(`background`,`red`);
 
 }, function() {
 
  $('#target').css(`background`,`#01579B`);
 
  });

2018年3月14日JavaScriptイベント

Posted by Yousuke.U