【JavaScript】マウスオーバー（ホバー）をトリガーにしたイベント
要素上でのマウスオーバー（ホバー）をトリガーとしたイベントサンプルです
CSSで言うところの:hoverですが、マウスカーソルが要素上に入った時・入っている時・動いている時・離れた時など、様々なトリガーが存在します
JavaScript・jQueryそれぞれのサンプルコードをメモ
目次
JavaScript：(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`);
});