在按钮单击时调用 JS 函数会阻止 CSS :hover

Question

我在所有按钮上都实现了CSS悬停方法。它看起来像这样：

.button:hover { background-color: #36a39c; }

这种方法在我单击其中一个按钮之前非常有效。单击按钮时，使用以下代码调用 JS 函数：

<div id= "one"><button class="button" id = "b1" value="0" onclick="checker(this.id)"></button></div>

这是 JS 脚本：

var checker = function(id)
{
var xyz = id; 
var value = document.getElementById(xyz).value
if (answerjson[value].is_right_choice==1)
{
for (var i = 1; i <=4; i++) {
document.getElementById("b"+i).style.background='#722F37';
}
document.getElementById(xyz).style.background='green';
setTimeout(function(){ alert("Correct!"); }, 100);
}
else {
for (var i = 1; i <=4; i++) {
document.getElementById("b"+i).style.background='#722F37';
}
document.getElementById(xyz).style.background='red';
setTimeout(function(){ alert("Sorry, Try Again"); }, 100);
}
}

调用该脚本后，我的按钮在悬停时不再改变颜色。知道为什么吗？

Answer 1

发生这种情况是因为当您使用 javascript 添加背景颜色时，它会添加为内联样式，并且它会覆盖 css 类选择器，因为内联样式总是需要更多首选项。你需要用这种颜色创建一个类，并使用javascript添加/删除它。例如，制作一个类

.green{
background-color: green;
}

然后像这样使用 JavaScript 添加它：

document.getElementById(xyz).className += " green";

Answer 2

您正在 JS 代码中设置内联style=""属性。

在内联样式中设置的属性始终覆盖 CSS 选择器(!important除外(，因此 CSS 不再执行任何操作。

您应该添加 CSS 类，而不是设置内联样式。