onmouseover

onmouseoverの基本的な使い方

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

以下は、利用例です。

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

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

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

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

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

画像での利用例

onmouseoverは、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.onmouseover = func1;
x.onmouseout = func2;
</script>

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

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

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

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

子要素からの移動

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

<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.onmouseover = func1;
y.onmouseenter = func2;
</script>

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

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

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

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

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

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

HTMLの属性として記述する(非推奨)

onmouseoverは、HTMLの属性としても記述できます。

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

divタグで、onmouseover属性によってalertを実行しています。これでも、同じ動作をします。

属性で記述する方法は、以前は多く使われていましたが、今では非推奨になっています。新しくスクリプトを作る時は、これまで説明したプロパティで記述するか、イベントリスナーを使って記述がお薦めです。

ブラウザのサポート状況

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

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

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