JS鼠标悬停事件|极客教程

JS鼠标悬停事件

在Web开发中，鼠标事件是常见的交互行为之一。鼠标悬停事件（mouseover）是指鼠标指针位于特定元素上方时所触发的事件。通过JS代码可以轻松地实现鼠标悬停事件的监听与处理，从而实现更好的用户体验。

基本语法

鼠标悬停事件是DOM事件中的一种，我们可以通过addEventListener()方法来为特定元素添加鼠标悬停事件的监听器。语法如下：

element.addEventListener("mouseover", function(event) {
    // 鼠标悬停时的处理逻辑
});

在这段代码中，element表示要监听的元素，可以是HTML元素对象或者通过document.querySelector()方法获取的元素；第一个参数是事件名称”mouseover”，表示监听鼠标悬停事件；第二个参数是一个回调函数，当鼠标悬停事件发生时会执行这个函数。

示例代码

让我们通过一个简单的示例来演示如何使用JS实现鼠标悬停事件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouseover Event Demo</title>
<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        text-align: center;
        line-height: 200px;
        font-size: 20px;
        cursor: pointer;
    }
</style>
</head>
<body>
<div class="box" id="box">Hover over me!</div>

<script>
    const box = document.getElementById('box');

    box.addEventListener('mouseover', function() {
        box.style.backgroundColor = 'lightcoral';
        box.textContent = 'Mouse over me!';
    });

    box.addEventListener('mouseout', function() {
        box.style.backgroundColor = 'lightblue';
        box.textContent = 'Hover over me!';
    });
</script>
</body>
</html>

在这个示例中，我们定义了一个div元素，当鼠标悬停在这个元素上时，背景颜色会变成lightcoral，文本内容也会改变。当鼠标移出时，元素恢复到初始状态。