mouseover
イベントは Element
において、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに発生します。
バブリング | あり |
---|---|
キャンセル | 可 |
インターフェイス | MouseEvent |
イベントハンドラープロパティ | onmouseover |
例
以下の例は、 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);
結果
仕様書
仕様書 | 状態 |
---|---|
UI Events mouseover の定義 |
草案 |
Document Object Model (DOM) Level 3 Events Specification mouseover の定義 |
廃止 |
ブラウザーの互換性
BCD tables only load in the browser