mouseenter

mouseenterの基本的な使い方

イベントリスナーのmouseenterは、要素内にマウスカーソルが移動した時に処理を実行できます。

以下は、利用例です。

<div id="test-enter">
ここにマウスを移動します。
</div>

<script>
const x = document.querySelector("#test-enter");
x.addEventListener("mouseenter", function(){alert("テストです");});
</script>

赤字部分でmouseenterイベントを登録しています。

実行例は、以下のとおりです。

要素内にマウスを移動すると、アラートが表示されます。

画像での利用例

mouseenterは、img要素でも使えます。

<img src="199.png" alt="" id="test-enter">

<script>
function func1() {
  x.src = "11.png";
}
function func2() {
  x.src = "199.png";
}

const x = document.querySelector("#test-enter");
x.addEventListener("mouseenter", func1);
x.addEventListener("mouseleave", func2);
</script>

11.pngはスペードAの画像で、199.pngはトランプ裏の画像とします。

最初は、トランプ裏の画像が表示されますが、赤字部分により画像内にマウスが移動した時、スペードのAに入れ替わります。青字部分は画像の外にマウスが移動した時、トランプ裏の画像に戻しています。mouseleaveは、マウスが要素外に出た時をイベントとします。

実行例は、以下のとおりです。

画像内にマウスカーソルがある間だけ、トランプが表になってスペードのAである事ことが確認できます。

子要素からの移動

mouseenterは、外側からマウスが移動するとイベントとなりますが、子要素(内側の要素)から移動するとイベントになりません。

<div id="test-enter1">
枠内にマウスを移動させると赤になります。<br>
トランプ画像にマウスを移動させると黒になります。
<img src="11.png" alt="スペードA" id="test-enter2">
再度トランプ画像の外にマウスを移動させるても赤になりません。
</div>

<script>
function func1() {
  x.style.color = "red";
}
function func2() {
  x.style.color = "black";
}

const x = document.querySelector("#test-enter1");
const y = document.querySelector("#test-enter2");
x.addEventListener("mouseenter", func1);
y.addEventListener("mouseenter", func2);
</script>

divの子要素として、img要素があります。

赤字部分でマウスカーソルが枠内(div内)に移動すると、赤色に変わるようにしています。青字部分は、マウスカーソルが画像内(img内)に移動した時の処理で、黒字になるようにしています。

実行例は、以下のとおりです。

枠内にマウスを移動させると赤になります。
トランプ画像にマウスを移動させると黒になります。 再度トランプ画像の外にマウスを移動させるても赤になりません。

枠内に移動させると赤になり、子要素である画像に移動させると黒になります。子要素である画像から枠内に移動させても赤にはなりません。このため、外側から内側への移動だけイベントになっていることがわかると思います。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。