Element: mouseover イベント

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

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

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

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);

結果

仕様書

仕様書 状態
UI Events
mouseover の定義
草案
Document Object Model (DOM) Level 3 Events Specification
mouseover の定義
廃止

ブラウザーの互換性

BCD tables only load in the browser

関連情報