Element: mouseover イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("mouseover", (event) => {});

onmouseover = (event) => {};

イベント型

MouseEvent です。 UIEvent および Event を継承しています。

イベントプロパティ

親である UIEvent および Event から継承したプロパティもあります。

MouseEvent.altKey 読取専用: このマウスイベントが発行されたときに alt キーが押されていた場合は true を返します。
MouseEvent.button 読取専用: このマウスイベントが発行されたときに押されていたボタンの番号です（もしあれば）。
MouseEvent.buttons 読取専用: このマウスイベントが発行されたときに押されていたボタンです（もしあれば）。
MouseEvent.clientX 読取専用: ビューポート座標におけるマウスポインターの X 座標です。
MouseEvent.clientY 読取専用: ビューポート座標におけるマウスポインターの Y 座標です。
MouseEvent.ctrlKey 読取専用: このマウスイベントが発行されたときに control キーが押されていた場合は true を返します。
MouseEvent.layerX 非標準読取専用: このイベントの現在のレイヤーにおける相対の水平座標を返します。
MouseEvent.layerY 非標準読取専用: このイベントの現在のレイヤーにおける相対の垂直座標を返します。
MouseEvent.metaKey 読取専用: このマウスイベントが発行されたときに meta キーが押されていた場合は true を返します。
MouseEvent.movementX 読取専用: 前回の mousemove イベントの位置から相対的なマウスポインターの X 座標です。
MouseEvent.movementY 読取専用: 前回の mousemove イベントの位置から相対的なマウスポインターの Y 座標です。
MouseEvent.offsetX 読取専用: 対象ノードのパディング辺からの相対的なマウスポインターの X 座標です。
MouseEvent.offsetY 読取専用: 対象ノードのパディング辺からの相対的なマウスポインターの Y 座標です。
MouseEvent.pageX 読取専用: 文書全体からの相対的なマウスポインターの X 座標です。
MouseEvent.pageY 読取専用: 文書全体からの相対的なマウスポインターの Y 座標です。
MouseEvent.relatedTarget 読取専用: もしあれば、イベントの副ターゲットです。
MouseEvent.screenX 読取専用: スクリーン座標におけるマウスポインターの X 座標です。
MouseEvent.screenY 読取専用: スクリーン座標におけるマウスポインターの Y 座標です。
MouseEvent.shiftKey 読取専用: このマウスイベントが発行されたときに shift キーが押されていた場合は true を返します。
MouseEvent.mozInputSource 非標準読取専用: イベントを発生させた機器の種類（MOZ_SOURCE_* 定数のいずれか）。これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます（これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません）。
MouseEvent.webkitForce 非標準読取専用: クリックしたときに適用された圧力です。
MouseEvent.x 読取専用: MouseEvent.clientX の別名です。
MouseEvent.y 読取専用: MouseEvent.clientY の別名です。

例

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

HTML

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",
  (event) => {
    // highlight the mouseenter target
    event.target.style.color = "purple";

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

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

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

結果

仕様書

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