Element: mouseover イベント

mouseover イベントは、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに、その要素 (Element) に発行されます。

バブリング あり
キャンセル 可
インターフェイス MouseEvent
イベントハンドラープロパティ onmouseover

例

以下の例は、mouseover と mouseenter の各イベントの違いを説明しています。

HTML

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

JavaScript

let test = document.getElementById("test");

// このハンドラーは、カーソルが順序なしリストの上を移動した
// ときに1度だけ実行されます
test.addEventListener("mouseenter", function( event ) {
  // mouseenter の対象を強調
  event.target.style.color = "purple";

  // 少し待ってから色をリセット
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);

// このハンドラーは異なるリスト項目の上を移動するごとに
// 実行されます
test.addEventListener("mouseover", function( event ) {
  // mouseover の対象を強調
  event.target.style.color = "orange";

  // 少し待ってから色をリセット
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);

結果

仕様書

Specification
UI Events
# event-type-mouseover
HTML Standard
# handler-onmouseover

ブラウザーの互換性

BCD tables only load in the browser

関連情報