如何还原span元素样式至原始CSS以恢复hover交互效果？

问题根源 #

你用JavaScript直接设置了元素的行内样式，行内样式的优先级远高于CSS类和伪类样式。当执行else分支时，元素被加上了行内的background-color: #000000，这会直接覆盖.spoiler:hover的样式，导致hover时无法改变背景色。

解决方案1：用CSS类切换状态（推荐） #

放弃直接操作行内样式，改用CSS类控制显示/隐藏状态，不会破坏原有CSS的优先级规则。

1. 新增CSS类控制已显示状态：

.spoiler {
  background-color: #000000;
  color: #000; /* 初始文字与背景同色，隐藏内容 */
}

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

/* 新增已显示状态的类 */
.spoiler.revealed {
  background-color: transparent;
  color: #f00;
}

2. 修改HTML的点击事件，传递当前元素：

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

3. 修改JavaScript代码，切换类：

function reveal(element) {
  // 直接切换revealed类，替代原来的条件判断逻辑
  element.classList.toggle('revealed');
  
  // 如果需要保留你的条件判断逻辑，改成下面的写法：
  // if (/* 你的判断条件 */) {
  //   element.classList.add('revealed');
  // } else {
  //   element.classList.remove('revealed');
  // }
}

解决方案2：移除行内样式（兼容原有逻辑） #

如果不想改动CSS结构，可以在else分支中移除行内样式，让原来的CSS类重新生效：

if (...) {
  sentence.style.color = "#f00";
  sentence.style.backgroundColor = "transparent";
} else {
  // 移除行内的颜色和背景色样式，恢复CSS类的控制
  sentence.style.removeProperty('color');
  sentence.style.removeProperty('background-color');
}

这种方式会清除行内样式，让.spoiler和.spoiler:hover的样式重新生效，hover就能正常显示文本了。

内容的提问来源于stack exchange，提问作者coolpy