How do i re-enable link hover effect

Question

I'm working on a quiz game,(note that the Answer options are made of anchor tags)

I added code in the options.forEach eventListener, that would set the options pointer-events to "none" so that you cant choose another answer once one has been clicked.

// Option BTN Events

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

}); }); I tried: to make the btn.eventListener ( which is the next button ) among other things, set the bg-color back to gray, and set the options style.pointerEvents = "auto"; so that you can click an option for the next question.

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

Problem: This code works for re-enabling the ability to click an option again, but I want the hover effect to come back as well. how can I do this?

Answer 1

I think it's because you're setting the background color in javascript and it is applied to the element in inline level (style="background-color: red;") which is come before in terms of precedence from extarnel css file.

For better explantion: Here

And the solution for that you should add !important statement in your external css file.

Here is an example:

 .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>

As you can see here the one without the !important isn't changing color when hover but the one with it is actually changing.

So you should add !important to your code in the hover section.