如何用CSS和JS实现按钮悬停时切换coverbg类div的背景色

之前修改原有body操作的代码不生效，基本都是新手常踩的几个共性问题：

• 类名匹配错误：HTML中div挂载的类是coverbg，但CSS定义的规则是.cover，两个字符串没有完全对应，导致基础背景样式根本没有加载到目标元素上
• 脚本执行顺序错误：把获取DOM的JS代码写在了<head>标签里，页面还没渲染到目标div和按钮时就执行了逻辑，根本拿不到元素的引用
• 样式恢复逻辑写错：鼠标移出时没有清除临时加的内联样式，硬写回的背景值和原有CSS规则的优先级冲突，导致切换效果失效

第一步：修正基础页面结构 #

统一所有类名和选择器的拼写，保证一一对应，同时给目标区域加足够的可视高度（不然哪怕背景变了，区域没高度也看不出效果）：

<!-- 目标div -->
<div class="cover">背景色随按钮悬停切换的显示区域</div>
<!-- 触发按钮，保留你定义的id -->
<button id="triggerbg">鼠标悬停在这里试试</button>

对应的基础CSS样式，实现默认白色背景：

.cover {
  background-color: #FFFFFF;
  min-height: 300px;
  /* 可选加过渡效果，让颜色变化不生硬 */
  transition: background-color 0.3s;
}

第二步：写入交互逻辑 #

把JS代码放在页面最底部的</body>标签之前，保证DOM完全加载完成后再执行，不需要引入任何第三方库：

// 分别获取触发按钮、目标div两个元素
const triggerBtn = document.getElementById('triggerbg');
const targetDiv = document.querySelector('.cover');

// 绑定鼠标悬停事件：按钮上悬停时，把目标div背景改成黑色
triggerBtn.addEventListener('mouseenter', () => {
  targetDiv.style.backgroundColor = '#000000';
});

// 绑定鼠标移出事件：按钮上移开时，清除临时加的内联样式，自动回到CSS定义的默认白色
triggerBtn.addEventListener('mouseleave', () => {
  targetDiv.style.backgroundColor = '';
});

快速调试指南 #

• 恢复默认样式时不要硬写回#FFFFFF，设为空字符串让浏览器自动读取CSS里的默认值即可，后续调整默认背景色时不需要同步修改JS代码
• 打开浏览器控制台查看报错，如果出现Cannot read properties of null (reading 'addEventListener')，说明JS执行的时候还没找到对应元素，把script标签挪到页面最底部就能解决
• 逐字核对类名、id的拼写，JS和CSS的选择器是严格区分大小写的，哪怕多打一个空格、少写一个字母都会匹配失败

内容的提问来源于stack exchange，提问作者Adarsh Pawar