触发事件监听后无法修改元素背景色（原生JavaScript问题）

核心原因是CSS样式优先级冲突，具体是以下常见场景导致的：

触发场景分析 #

你大概率在鼠标悬停时直接给div设置了行内样式（通过element.style.backgroundColor），而清除样式时用了优先级更低的方式（比如添加CSS类）。

举个实际代码例子：

• 悬停事件代码：

gridDiv.addEventListener('mouseover', () => {
  gridDiv.style.backgroundColor = 'black';
});

这段代码会给div加上行内属性style="background-color: black"，而行内样式的优先级远高于类选择器、全局样式。

• 清除按钮代码如果是这样：

document.querySelectorAll('.grid-cell').forEach(cell => {
  cell.classList.add('red-bg');
});

同时CSS里写：

.red-bg { background-color: red; }

那已经触发过悬停的div，行内的black会直接覆盖类的red，导致颜色改不了；而没触发过悬停的div没有行内样式，类样式就能生效变红。

解决方法 #

方法一：清除时直接覆盖行内样式 #

不用类，直接通过style属性设置红色，强制覆盖原来的行内样式：

document.querySelectorAll('.grid-cell').forEach(cell => {
  cell.style.backgroundColor = 'red';
});

方法二：统一用CSS类控制颜色（更推荐） #

全程不用行内样式，改用类来管理状态，从根源避免优先级问题：

1. 先写CSS样式：

.grid-cell {
  background-color: white;
}
.grid-cell.hovered {
  background-color: black;
}
.grid-cell.clear-red {
  background-color: red;
}

2. 悬停事件改为添加类：

gridDiv.addEventListener('mouseover', () => {
  gridDiv.classList.add('hovered');
});

3. 清除时移除悬停类，添加红色类：

document.querySelectorAll('.grid-cell').forEach(cell => {
  cell.classList.remove('hovered');
  cell.classList.add('clear-red');
});

如果之后还需要让div能再次悬停变黑，清除时可以同时移除clear-red类，或者调整CSS顺序保证hovered类优先级更高。

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