JS 鼠标移入移出事件|极客笔记

JS 鼠标移入移出事件

在网页开发中，经常会用到鼠标移入移出事件来实现一些交互效果，比如改变元素样式、显示隐藏元素等。在 JavaScript 中，我们可以通过监听鼠标移入和移出事件来实现这些效果。

监听鼠标移入事件（mouseover）

鼠标移入事件会在鼠标指针移入一个元素时触发。我们可以使用 addEventListener 方法来监听鼠标移入事件，并在事件处理函数中定义需要执行的操作。

示例代码如下所示：

// 获取需要监听的元素
const element = document.getElementById('targetElement');

// 监听鼠标移入事件
element.addEventListener('mouseover', function() {
    // 鼠标移入时执行的操作
    element.style.backgroundColor = 'red';
    console.log('鼠标移入了元素');
});

运行结果：当鼠标移入指定的元素时，该元素的背景色会变为红色，并在控制台输出 鼠标移入了元素。

监听鼠标移出事件（mouseout）

鼠标移出事件会在鼠标指针移出一个元素时触发。同样可以使用 addEventListener 方法来监听鼠标移出事件，并定义对应的事件处理函数。

示例代码如下所示：

// 获取需要监听的元素
const element = document.getElementById('targetElement');

// 监听鼠标移出事件
element.addEventListener('mouseout', function() {
    // 鼠标移出时执行的操作
    element.style.backgroundColor = 'blue';
    console.log('鼠标移出了元素');
});

运行结果：当鼠标移出指定的元素时，该元素的背景色会变为蓝色，并在控制台输出 鼠标移出了元素。

鼠标移入移出事件的应用

通过监听鼠标移入移出事件，我们可以实现一些常见的交互效果，比如当鼠标移入一个按钮时显示提示信息，当鼠标移出时隐藏提示信息。

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Event Example</title>
    <style>
        .tooltip {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <button id="btn">Hover over me</button>
    <div class="tooltip" id="tooltip">This is a tooltip</div>
    <script>
        const btn = document.getElementById('btn');
        const tooltip = document.getElementById('tooltip');

        btn.addEventListener('mouseover', function() {
            tooltip.style.display = 'block';
        });

        btn.addEventListener('mouseout', function() {
            tooltip.style.display = 'none';
        });
    </script>
</body>
</html>

在上面的示例中，当鼠标移入按钮时，会显示一个提示信息（tooltip），当鼠标移出按钮时，提示信息会隐藏起来。