Revert text-styling (class) back to it's original CSS

Question

I have a span like this and styled as:

<span class="spoiler" onclick="reveal()"> I am a sentence.</span>

.spoiler {
  background-color:#000000;
}

.spoiler:hover{
  background-color:transparent;
  }

Then I have some JS that modifies to permanently reveal the hidden text (truncated to show relevant part only):

if ... {
        sentence.style.color = "#f00";
        sentence.style.backgroundColor = "transparent";
    } else {
        sentence.style.color = "#000";
        sentence.style.backgroundColor = "#000000";
    }

The problem is in the else . Once I click to revert back to the spoiler style, I can no longer hover over the text to reveal the sentence (as I could pre-click).

How to achieve this?

Answer 1

Instead of set style on span in 'if' add some class on it, and remove this class in 'else'. Or just remove style attribute in else.