Element: mouseover イベント

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

例

以下の例は、 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);

結果

仕様書

ブラウザーの互換性

関連情報

• イベントの紹介
• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseout
• mouseenter
• mouseleave
• contextmenu