悬停效果在我对对象应用javascript后消失

Question

大家好！

所以问题来了。我正在做一个前端导师的挑战，我在CSS中的一个对象上应用了悬停效果。

.numero-avaliacao a:hover {
background-color: hsl(217, 12%, 63%);
color: white;
}

悬停效应工作

而且效果很好。然而，在我对这些对象应用javascript事件后，所有对象的悬停效果都消失了。我对JS所做的只是改变背景颜色和对象的颜色。然而，这似乎在某种程度上影响了悬停效果。

function selecionarNota() {
if (this.style.backgroundColor == 'rgb(251, 116, 19)') {
for (let i = 0; i < numAvaliacao.length; i++) {
numAvaliacao[i].style.backgroundColor = 'hsl(213, 19%, 21%)';
numAvaliacao[i].style.color = 'hsl(217, 12%, 63%)';
}
} else {
for (let i = 0; i < numAvaliacao.length; i++) {
numAvaliacao[i].style.backgroundColor = 'hsl(213, 19%, 21%)';
numAvaliacao[i].style.color = 'hsl(217, 12%, 63%)';
console.log('Teste 2!');
}
this.style.backgroundColor = 'rgb(251, 116, 19)';
this.style.color = 'white';
}
}

我通过在JS上使用mouseover和mouseleave解决了这个问题，但我真的很想了解发生了什么，这样我就可以修复它，也可以使用悬停效果。

Answer 1

内联样式的优先级高于外部css样式表。

当样式表中的:hover被触发时，它无法覆盖您通过javascript定义的背景颜色和颜色的内联样式。

您可以在样式表中的声明之后添加一个!important标记。

.numero-avaliacao a:hover {
background-color: hsl(217, 12%, 63%) !important;
color: white !important;
}

这应该奏效。

另一种选择是通过javascript将另一个类添加到元素中，而不是设置内联样式。