JavaScript 中的鼠标悬停事件

当指针设备将光标移向网页中的元素时，会发生鼠标悬停事件。

在本教程中，我们将使用 JavaScript 实现鼠标悬停事件。

为此，我们可以使用 addEventListener() 在所需元素上添加所需的鼠标悬停事件。

参考下面的示例。

• HTML

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

• JavaScript

let test = document.getElementById("example");

test.addEventListener("mouseover", function (event) {
  //highlight the mouseover target
  event.target.style.color = "red";
}, false);

test.addEventListener("mouseout", function (event) {
  // highlight the mouseout target
  event.target.style.color = "black";
}, false);

在上面的代码中，我们使用 getElementById() 函数检索我们希望将光标移动到的所需元素。然后我们继续将 addEventListener() 方法应用于此元素，该方法将给定的事件处理程序附加到此元素。

当提供的事件发送到目标时，EventTarget 方法 addEventListener() 创建一个将被调用的函数。这里分别调用了 mouseover 和 mouseout 方法。

mouseover 事件将光标移动到给定的元素。mouseout 事件将光标从该元素上移开。

event.target.style.color 属性指定调用特定目标方法（例如 mouseover 或 mouseout）时的颜色。