mouseenter/JavaScript

mouseenterの使い方

　mouseenterは、要素内にマウスカーソルが移動した時に処理を実行出来ます。

　以下は、例です。

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

<script>
var x1 = document.getElementById("test-enter1");
x1.addEventListener("mouseenter", function(){alert("テストです");}, false);
</script>

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

　実行例は、以下の通りです。尚、分かり易いように枠を付け、広くならないよう幅も指定しています。

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

画像での利用例

　mouseenterは<img>でも使えます。

<img src="199.png" alt="トランプ" id="test-enter2" />

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

var x2 = document.getElementById("test-enter2");
x2.addEventListener("mouseenter", func1, false);
x2.addEventListener("mouseleave", func2, false);
</script>

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

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

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

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

子要素との関係

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

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

<script>
function func3() {
    x3.style.color = "red";
}
function func4() {
    x3.style.color = "black";
}

var x3 = document.getElementById("test-enter3");
var x4 = document.getElementById("test-enter4");
x3.addEventListener("mouseenter", func3, false);
x4.addEventListener("mouseenter", func4, false);
</script>

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

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

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

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

サポート

・サポートするブラウザ

　以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。

・サポートするタグ

　<br>等を除いた多くのタグでサポートされています。

「イベントリスナー一覧」に戻る