鼠标悬停后如何突出显示字符？

Question

​

​

我正在尝试在CSS中创建这种效果。到目前为止，我只能以相反的顺序获得这个效果。这意味着当我将鼠标悬停在第一个字母上时，它会突出显示它后面的所有其他文本/字符(我们的故事)。有没有可能逆转目前正在起作用的下面的效果，或者有其他解决方案来获得这种效果？

​

 span:hover ~ span {
     color: black;
     background-color: yellow;
 }

 <div>
      <span>T</span>
      <span>h</span>
      <span>e</span>
      <span> </span>
      <span>S</span>
      <span>t</span>
      <span>o</span>
      <span>r</span>
      <span>y</span>
      <span> </span>
      <span>o</span>
      <span>f</span>
      <span> </span>
      <span>w</span>
      <span>e</span>
 </div>

​

Answer 1

我能够通过逆转您的反向效果来获得预期的结果:)

我高亮显示div:hover上的所有字符，并取消高亮显示div:hover span:hover ~ span上的所有字符，这样最终就能解决所有问题。

​

div {
  background-color: black;
  display: inline-block;
}

div:hover span {
  color: black;
  background-color: yellow;
}

span {
  color: white;
  font-weight: 600;
  font-size: 32px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

div:hover span:hover ~ span {
    color: white;
    background-color: black;
}

<div>
<span>T</span><span>h</span><span>e</span><span> </span><span>S</span><span>t</span><span>o</span><span>r</span><span>y</span><span> </span><span>o</span><span>f</span><span> </span><span>W</span><span>e</span>
</div>

​