js鼠标经过div改变

基础概念

在JavaScript中，当鼠标指针移动到某个HTML元素（如<div>）上时，可以通过监听mouseover事件来触发相应的操作。同样，当鼠标离开该元素时，可以监听mouseout事件。

类型

mouseover：当鼠标指针移动到元素上方时触发。
mouseout：当鼠标指针离开元素时触发。
mouseenter：当鼠标指针进入元素时触发（不会冒泡）。
mouseleave：当鼠标指针离开元素时触发（不会冒泡）。

应用场景

导航菜单高亮：当鼠标经过导航菜单项时，改变该项的背景颜色。
工具提示显示：当鼠标经过某个元素时，显示该元素的详细信息。
动态内容切换：根据鼠标经过的不同区域，显示不同的内容。

示例代码

以下是一个简单的示例，展示了如何在鼠标经过<div>时改变其背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouseover Example</title>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="myDiv"></div>

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

        myDiv.addEventListener('mouseover', function() {
            this.style.backgroundColor = 'red';
        });

        myDiv.addEventListener('mouseout', function() {
            this.style.backgroundColor = 'blue';
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题1：事件未触发

原因：可能是由于JavaScript代码放在了HTML文档的头部，导致DOM元素还未加载完成时就执行了脚本。

解决方法：将JavaScript代码放在<body>标签的底部，或者使用DOMContentLoaded事件确保DOM加载完成后再绑定事件。

document.addEventListener('DOMContentLoaded', function() {
    const myDiv = document.getElementById('myDiv');
    myDiv.addEventListener('mouseover', function() {
        this.style.backgroundColor = 'red';
    });
    myDiv.addEventListener('mouseout', function() {
        this.style.backgroundColor = 'blue';
    });
});

问题2：事件冒泡影响其他元素

原因：如果多个元素嵌套在一起，事件可能会冒泡到父元素，导致不期望的行为。

解决方法：使用event.stopPropagation()方法阻止事件冒泡。

myDiv.addEventListener('mouseover', function(event) {
    event.stopPropagation();
    this.style.backgroundColor = 'red';
});

myDiv.addEventListener('mouseout', function(event) {
    event.stopPropagation();
    this.style.backgroundColor = 'blue';
});

通过以上方法，可以有效解决常见的鼠标事件相关问题，并实现丰富的交互效果。