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

Question

我正在尝试在 CSS 中创建此效果。到目前为止，我只能以相反的顺序获得这种效果。这意味着当我将鼠标悬停在第一个字母上时，它会突出显示所有其他 text/character（我们的故事）。是否有可能逆转目前有效的以下效果，或者是否有任何其他解决方案来获得这种效果？

 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>

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

How to highlight characters after mouse hover?

html

css

animation

css-selectors

css-transitions