--- title: 'Element: mouseover イベント' slug: Web/API/Element/mouseover_event tags: - API - Cursor - DOM - Event - Interface - MouseEvent - Reference - events - mouse - mouseover - move - pointer translation_of: Web/API/Element/mouseover_event ---
{{APIRef}}

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

バブリング あり
キャンセル 可
インターフェイス {{domxref("MouseEvent")}}
イベントハンドラープロパティ {{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}

例

以下の例は、 mouseover と {{domxref("Element/mouseenter_event", "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);

結果

{{EmbedLiveSample('Examples')}}

仕様書

仕様書 状態
{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}} {{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}} {{Spec2('DOM3 Events')}}

ブラウザーの互換性

{{Compat("api.Element.mouseover_event")}}

関連情報