📌  相关文章
📜  javascript even mouseout - Javascript (1)

📅  最后修改于: 2023-12-03 14:42:24.635000             🧑  作者: Mango

Javascript事件mouseout

mouseout是Javascript中的一个事件，当鼠标从一个元素上移开时触发。该事件在以下情况下使用：

  • 当需要执行某些代码，但鼠标移出元素时，需要停止执行。
  • 当需要停止某些事件或动画时，当鼠标移出元素时需要执行某些代码。
触发事件的方式

当鼠标从一个元素上移开时，mouseout事件便会被触发。可以使用以下两种方式监听事件：

// 方法一
element.addEventListener("mouseout", function(event) {
  // 执行代码
});

// 方法二
element.onmouseout = function(event) {
  // 执行代码
}
示例

以下示例演示了如何在mouseout事件中添加样式，使鼠标移动到元素上时背景颜色变为灰色，当鼠标从元素上移开时背景颜色恢复为原始颜色。

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 添加样式 */
      .myDiv {
        padding: 20px;
        background-color: #4CAF50;
        color: white;
        font-size: 2em;
      }

      .myDiv:hover {
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <div class="myDiv" onmouseout="this.style.backgroundColor='#4CAF50'">
      Move your mouse over me
    </div>
  </body>
</html>
结论

mouseout事件在Javascript中用于在鼠标从元素上移开时执行某些代码。它可以通过addEventListener或onmouseout将事件监听器绑定到元素上。代码片段如下：

element.addEventListener("mouseout", function(event) {
  // 执行代码
});
element.onmouseout = function(event) {
  // 执行代码
};