HTML の onmouseover 属性

HTMLタグのonmouseover属性には、マウスカーソルが乗ったときに実行するJavaScriptを記述します。

mouseoverとmouseenterの違い

mouseover と似たイベントに mouseenter がありますが、両者には重要な違いがあります。

mouseover はマウスカーソルが要素に入ったときに発生し、さらに子要素にマウスが入ってもイベントが発生します（バブリングする）。

mouseenter はマウスカーソルが要素に入ったときにのみ発生します。子要素にマウスが入ってもイベントは発生しません（バブリングしない）。

イベントの違い
イベント	バブリング
mouseover	する
mouseenter	しない

HTML

<button type="button" onmouseout="mouseOut()" onmouseover="mouseOver()">
  Button
</button>
<p>
  Event: <span id="event"></span>
</p>
<script>
  function mouseOut() {
    document.getElementById("event").innerHTML = "mouseout";
  }
  function mouseOver() {
    document.getElementById("event").innerHTML = "mouseover";
  }
</script>