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 の定義
廃止された

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mouseover eventChrome 完全対応 2Edge 完全対応 12Firefox 完全対応 6IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 4WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 6Opera Android 完全対応 10.1Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報