JavaScript 中的鼠标悬停事件

Kushank Singh 2021年10月2日
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() 创建一个将被调用的函数。这里分别调用了 mouseovermouseout 方法。

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

event.target.style.color 属性指定调用特定目标方法(例如 mouseovermouseout)时的颜色。