mouseover

mouseoverの基本的な使い方

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

以下は、利用例です。

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

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

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

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

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

画像での利用例

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

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

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

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

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

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

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

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

子要素からの移動

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

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

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

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

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

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

青字部分は、マウスカーソルが画像内(img内)に移動した時の処理で、黒字になるようにしています。mouseenterも、要素内にマウスが移動するとイベントになりますが、バグリング(子要素から親要素へ伝播)すると赤に戻ってしまうため、mouseoverの代わりに使っています。

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

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

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

ブラウザのサポート状況

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

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

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