我如何重新启用 link 悬停效果

Question

我正在做一个问答游戏，（注意答案选项由锚标签组成）

我在 options.forEach eventListener 中添加了代码，它将选项指针事件设置为“none”，这样您就无法在点击答案后选择另一个答案。

// 选项 BTN 事件

// Only select one option
if ("clicked") {
  options.forEach((op) => {
    op.style.pointerEvents = "none";
  });
}

}); }); 我试过：制作 btn.eventListener （这是下一个按钮）等，将 bg-color 设置回灰色，并设置选项 style.pointerEvents = "auto";以便您可以单击下一个问题的选项。

btn.addEventListener("click", () => {
  currentQuestion += 1;
  getQuestion();
  options.forEach((op) => {
    op.style.backgroundColor = $btnCol;
    op.style.pointerEvents = "auto";
  });
});

问题：此代码适用于重新启用再次单击选项的功能，但我希望悬停效果也能恢复。我该怎么做？

Answer 1

我认为这是因为您在 javascript 中设置了背景颜色，并且它应用于之前出现的内联级别 (style="background-color: red;") 中的元素根据 extarnel css 文件的优先级。

为了更好的解释：Here

并且您应该在外部 css 文件中添加 !important 语句的解决方案。

这是一个例子：

.a {
  background-color: red;
}
.a:hover {
  background-color: blue;
}

.b {
  background-color: red;
}
.b:hover {
  background-color: blue !important;
}

<div class="a" style="background-color: red;">without !important</div>
<div class="b" style="background-color: red;">with !important</div>

正如您在这里看到的，没有 !important 的那个在悬停时没有改变颜色，但是有它的那个实际上在改变。

所以您应该在悬停部分的代码中添加 !important。

我如何重新启用 link 悬停效果

How do i re-enable link hover effect

javascript