JavaScript - マウスオーバしたときに処理を呼び出す

マウスオーバしたときに処理を呼び出す: mouseenter

mouseenter イベントは、マウスのポインターが要素の中に移動したときに発生します。

<div id="box"></div>

const box = document.getElementById("box");

box.addEventListener("mouseenter", event => {
  console.log("マウスポインターが乗りました");
});

mouseenter イベント

外部リンク

Element: mouseenter イベント - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/API/Element/mouseenter_event

mouseleave イベントは、マウスのポインターが要素の中から離れたときに発生します。

<div id="box"></div>

const box = document.getElementById("box");

box.addEventListener("mouseleave", event => {
  console.log("マウスポインターが離れました");
});

mouseleave イベント

外部リンク

Element: mouseleave イベント - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/API/Element/mouseleave_event