onmouseenter/JavaScript

onmouseenterの使い方

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

　以下は、例です。

<div onmouseenter="alert('テストです');">
ここにマウスを移動します。
</div>

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

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

画像での利用例

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

<script>
function func1() {
    var x = document.getElementById("test-img");
    x.src = "11.png";
}
function func2() {
    var x = document.getElementById("test-img");
    x.src = "199.png";
}
</script>
<img src="199.png" alt="トランプ" onmouseenter="func1();" onmouseleave="func2();" id="test-img" />

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

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

　上記は、以下のようになります。

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

子要素との関係

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

<script>
function func3() {
    var x = document.getElementById("test-enter");
    x.style.color = "red";
}
function func4() {
    var x = document.getElementById("test-enter");
    x.style.color = "black";
}
</script>

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

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

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

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

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

サポート

・サポートするブラウザ

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

・サポートするタグ

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

「イベントハンドラ一覧」に戻る

「onmouseenterとonmouseoverの違い」