onmouseleaveの使い方
onmouseleaveは、要素外にマウスカーソルが移動した時に処理を実行出来ます。
以下は、例です。
【onmouseleave利用例】
<script>
function func1() {
var x = document.getElementById("test1");
x.style.color = "red";
}
</script>
<div onmouseleave="func1();" id="test1" >
ここの範囲外にマウスを移動させます。
</div>
赤字部分で、onmouseleaveによりfunc1を呼び出し、文字を赤色に変えています。
実行例は、以下の通りです。尚、分かり易いように枠を付け、広くならないよう幅も指定しています。
要素内にマウスカーソルを移動した後、要素外に移動すると、文字が赤色に変わります。
画像での利用例
onmouseleaveは<img>でも使えます。
【imgタグでの利用例】
<script>
function func2() {
var x = document.getElementById("test-img");
x.src = "11.png";
}
function func3() {
var x = document.getElementById("test-img");
x.src = "199.png";
}
</script>
<img src="199.png" alt="トランプ" onmouseenter="func2();" onmouseleave="func3();" id="test-img" />
11.pngはスペードAの画像で、199.pngはトランプ裏の画像とします。
最初は、トランプ裏の画像が表示されますが、赤字部分により画像内にマウスが移動した時、スペードのAに入れ替わります。onmouseenterは、マウスカーソルが要素内に移動した時をイベントとします。
青字部分は、onmouseleaveにより画像の外にマウスが移動した時、トランプ裏の画像に戻しています。
上記は、以下のようになります。
画像内にマウスカーソルがある間だけ、トランプが表になってスペードのAである事が確認出来ます。
子要素との関係
onmouseleaveは、要素外へマウスが移動するとイベントとなりますが、子要素へ移動してもイベントになりません。
【子要素がある時のonmouseleave】
<script>
function func4() {
var x = document.getElementById("test2");
x.style.color = "red";
}
</script>
<div onmouseleave="func4();" id="test2">
1)範囲外にマウスを移動させると赤になります。
<img src="11.png" alt="スペードA">
2)トランプ画像にマウスを移動させても赤になりません。
</div>
赤字部分でマウスカーソルが枠外に移動すると、赤色に変わるようにしています。
実行例は、以下の通りです。尚、5秒程度で戻るように追加で処理を入れています。
1)範囲外にマウスを移動させると赤になります。
2)トランプ画像にマウスを移動させても赤になりません。
枠外に移動させると赤になります。5秒すると元に戻ります。枠内に移動した後、子要素である画像上にマウスに移動させても色が変わりません。このように、onmouseleaveは内側から外側へ移動する時だけイベントにする事が出来ます。
サポート
・サポートするブラウザ
以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。
【サポートするブラウザ】
機種 |
ブラウザ |
サポート |
パソコン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
Microsoft Edge |
〇 |
Internet Explorer |
〇 |
スマートフォン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
・サポートするタグ
<br>や<iframe>等を除いた多くのタグでサポートされています。