Element: mouseover event

在此页

范例
规范
浏览器兼容性
另请参阅
相关话题

mouseover event is fired at an 元素 when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.

冒泡	Yes
可取消	Yes
接口	`MouseEvent`
事件处理程序特性	`onmouseover`

范例

The following example illustrates the difference between mouseover and mouseenter 事件。

HTML

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

JavaScript

let test = document.getElementById("test");
// This handler will be executed only once when the cursor
// moves over the unordered list
test.addEventListener("mouseenter", function( event ) {
  // highlight the mouseenter target
  event.target.style.color = "purple";
  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);
// This handler will be executed every time the cursor
// is moved over a different list item
test.addEventListener("mouseover", function( event ) {
  // highlight the mouseover target
  event.target.style.color = "orange";
  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);

结果

规范

规范	状态
UI Events The definition of 'mouseover' in that specification.	工作草案
DOM (文档对象模型) 3 级事件规范 The definition of 'mouseover' in that specification.	过时

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`mouseover` event	Chrome 2	Edge 12	Firefox 6	IE 9	Opera 9.5	Safari 4	WebView Android ≤37	Chrome Android 18	Firefox Android 6	Opera Android 10.1	Safari iOS 3.2	Samsung Internet Android 1.0

在此页

范例

HTML

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题