initial commit

1 files changed, 126 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/element/mouseout_event/index.html b/files/zh-cn/web/api/element/mouseout_event/index.html
new file mode 100644
index 0000000000..f77a4e8162
--- /dev/null
+++ b/files/zh-cn/web/api/element/mouseout_event/index.html
@@ -0,0 +1,126 @@
+---
+title: 'Element: mouseout 事件'
+slug: Web/API/Element/mouseout_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - MouseEvent
+  - Reference
+  - events
+  - mouseout
+  - 事件
+  - 参考
+  - 接口
+translation_of: Web/API/Element/mouseout_event
+---
+<p>当移动指针设备（通常是鼠标），使指针不再包含在这个元素或其子元素中时，<strong><code>mouseout</code></strong> 事件被触发。当指针从一个元素移入其子元素时，<code>mouseout</code> 也会被触发，因为子元素遮盖了父元素的可视区域。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="示例">示例</h2>
+
+<p>以下示例将说明如何使用 <code>mouseout</code> 事件。</p>
+
+<h3 id="mouseout_和_mouseleave">mouseout 和 mouseleave</h3>
+
+<p>以下示例说明了 <code>mouseout</code> 和 <a href="/en-US/docs/Web/Events/mouseleave" title="/en/Mozilla_event_reference/mouseleave"><code>mouseleave</code></a> 事件的区别。当鼠标离开<code>&lt;ul&gt;</code> 时，<code>mouseleave</code> 事件会添加到 {{HTMLElement("ul")}} 以将列表变成紫色。<code>mouseout</code> 在鼠标移出目标元素时被添加到列表，以将目标元素变成橙色。</p>
+
+<p>当你尝试的时候，你会发现 <code>mouseout</code> 被添加到单个列表项目上，而 <code>mouseleave</code> 则应用于整个列表，这取决于列表项目的层次关系，而列表项目遮盖了底层的 <code>&lt;ul&gt;</code>。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre>&lt;ul id="test"&gt;
+  &lt;li&gt;item 1&lt;/li&gt;
+  &lt;li&gt;item 2&lt;/li&gt;
+  &lt;li&gt;item 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let test = document.getElementById("test");
+
+// 当鼠标移出&lt;ul&gt;元素时，短暂地将列表变成紫色
+test.addEventListener("mouseleave", function( event ) {
+  // 高亮mouseleave的目标
+  event.target.style.color = "purple";
+
+  // 延迟一秒后重置颜色
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 1000);
+}, false);
+
+// 当鼠标离开&lt;li&gt;元素时，短暂地将其变成橙色
+test.addEventListener("mouseout", function( event ) {
+  // 高亮mouseout的目标
+  event.target.style.color = "orange";
+
+  // 延迟500ms后重置颜色
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);</pre>
+
+<h4 id="结果">结果</h4>
+
+<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="200" id="frame_mouseout_and_mouseleave" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Element/mouseout_event$samples/mouseout_and_mouseleave?revision=1552558" width="640"></iframe></p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.Element.mouseout_event")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li>{{Event("mousedown")}}</li>
+ <li>{{Event("mouseup")}}</li>
+ <li>{{Event("mousemove")}}</li>
+ <li>{{Event("click")}}</li>
+ <li>{{Event("dblclick")}}</li>
+ <li>{{Event("mouseover")}}</li>
+ <li>{{Event("mouseenter")}}</li>
+ <li>{{Event("mouseleave")}}</li>
+ <li>{{Event("contextmenu")}}</li>
+</ul>