Element: mouseout event

在此页

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

mouseout event is fired at an 元素 when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children. mouseout is also delivered to an element if the cursor enters a child element, because the child element obscures the visible area of the element.

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

范例

The following examples show the use of the mouseout 事件。

mouseout and mouseleave

The following example illustrates the difference between mouseout and mouseleave events. The mouseleave event is added to the <ul> to color the list purple whenever the mouse exits the <ul> . mouseout is added to the list to color the targeted element orange when the mouse exits it.

When you try this out, you'll find that mouseout is delivered to the individual list items, while mouseleave goes to the overall list, courtesy of the hierarchy of the items and the fact that list items obscure the underlying <ul> .

HTML

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

JavaScript

let test = document.getElementById("test");
// Briefly make the list purple when the mouse moves off the
// <ul> element
test.addEventListener("mouseleave", function( event ) {
  // highlight the mouseleave target
  event.target.style.color = "purple";
  // reset the color after a short delay
  setTimeout(function() {
    event.target.style.color = "";
  }, 1000);
}, false);
// Briefly make an <li> orange when the mouse moves off of it
test.addEventListener("mouseout", function( event ) {
  // highlight the mouseout 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 'mouseout' in that specification.	工作草案
DOM (文档对象模型) 3 级事件规范 The definition of 'mouseout' 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
`mouseout` event	Chrome Yes	Edge 12	Firefox Yes	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

在此页

范例

mouseout and mouseleave

HTML

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题