添加JavaScript事件后CSS hover效果消失的原因及解决咨询

你遇到的情况是行内样式的优先级高于CSS类选择器导致的。

当你用JS直接修改element.style.backgroundColor和element.style.color时，这些样式会被直接写入元素的行内style属性里。而CSS中的:hover伪类选择器优先级低于行内样式——哪怕处于hover状态，浏览器也会优先执行行内样式规则，所以你的CSS hover效果被覆盖，看起来像是“消失”了。

别用JS直接操作元素的style属性，改用添加/移除CSS类的方式管理选中状态，就能保留CSS hover效果：

1. 先在CSS里定义选中状态的类：

/* 选中状态样式 */
.numero-avaliacao a.selected {
    background-color: rgb(251, 116, 19);
    color: white;
}
/* 基础hover样式 */
.numero-avaliacao a:hover {
    background-color: hsl(217, 12%, 63%);
    color: white;
}
/* 可选：选中状态下的hover效果，按需调整 */
.numero-avaliacao a.selected:hover {
    background-color: hsl(217, 12%, 63%);
}

2. 修改JS代码为操作类名：

function selecionarNota() {
    // 移除所有元素的选中类
    numAvaliacao.forEach(item => item.classList.remove('selected'));
    
    // 若当前元素未选中，则添加选中类
    if (!this.classList.contains('selected')) {
        this.classList.add('selected');
    }
}

这样元素样式都由CSS类控制，行内不会有硬编码样式，CSS的:hover伪类就能正常触发——类选择器和伪类选择器的优先级可通过CSS规则正常控制，不会被行内样式压制。

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