香草JS悬停在div上更改背景颜色

基础概念

香草JavaScript（Vanilla JavaScript）指的是不依赖任何框架或库的原生JavaScript代码。悬停在元素上更改背景颜色是一个常见的交互效果，通常通过事件监听器来实现。

类型

这种效果可以通过以下几种方式实现：

使用addEventListener监听mouseover和mouseout事件。
使用CSS伪类:hover。

应用场景

用户界面交互：提升用户体验，使界面更加生动。
导航菜单：高亮显示当前选中的菜单项。
卡片式布局：突出显示用户感兴趣的部分。

示例代码

使用原生JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Effect</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="box" id="myBox"></div>

    <script>
        document.getElementById('myBox').addEventListener('mouseover', function() {
            this.style.backgroundColor = 'lightblue';
        });

        document.getElementById('myBox').addEventListener('mouseout', function() {
            this.style.backgroundColor = '#ccc';
        });
    </script>
</body>
</html>

使用CSS伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Effect</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }

        .box:hover {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

遇到的问题及解决方法

问题1：悬停效果不生效

原因：

可能是CSS选择器错误或JavaScript代码有误。
浏览器缓存问题。

解决方法：

检查CSS选择器和JavaScript代码是否正确。
清除浏览器缓存或尝试在无痕模式下打开页面。

问题2：背景颜色变化延迟

原因：

可能是JavaScript事件处理函数执行效率低。
页面加载时JavaScript代码未完全加载。

解决方法：

确保JavaScript代码在DOM完全加载后执行，可以使用DOMContentLoaded事件。
优化JavaScript代码，减少不必要的计算。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('myBox').addEventListener('mouseover', function() {
        this.style.backgroundColor = 'lightblue';
    });

    document.getElementById('myBox').addEventListener('mouseout', function() {
        this.style.backgroundColor = '#ccc';
    });
});

通过以上方法，可以有效解决悬停效果不生效或背景颜色变化延迟的问题。