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 2015年7月.

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