javascript - 在按钮点击 block 上调用 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";