JavaScript 中的鼠标悬停事件
Kushank Singh
2021年10月2日
当指针设备将光标移向网页中的元素时,会发生鼠标悬停事件。
在本教程中,我们将使用 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
)时的颜色。