mouseout

イベントリスナーのmouseoutについて、サンプルコードを示しながら使い方を説明しています。

mouseoutの基本的な使い方

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

以下は、利用例です。

【mouseout利用例】

<div id="test-out">
ここの範囲外にマウスを移動させます。 
</div>

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

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

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

ここの範囲外にマウスを移動させます。

要素内にマウスカーソルを移動した後、要素外に移動するとアラートが表示されます。

画像での利用例

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

【img要素での利用例】

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

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

const x = document.querySelector("#test-out");
x.addEventListener("mouseover", func1);
x.addEventListener("mouseout", func2);
</script>

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

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

青字部分は、mouseoutにより画像の外にマウスが移動した時、トランプ裏の画像に戻しています。

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

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

子要素への移動

mouseoutは、子要素(内側の要素)への移動でもイベントになります。

【子要素がある時のmouseout利用例】

<div id="test-out">
要素外にマウスを移動させると赤になります。
<img src="11.png" alt="スペードA"">
トランプ画像にマウスを移動させても赤になります。
</div>

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

const x = document.querySelector("#test-out");
x.addEventListener("mouseout", func1);
</script>

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

赤字部分でマウスカーソルが枠内(div内)から外に移動すると、赤色に変わるようにしています。

実行例は、以下のとおりです。なお、5秒程度で戻るように追加で処理を入れています。

要素外にマウスを移動させると赤になります。スペードA

トランプ画像にマウスを移動させても赤になりす。