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

【问题标题】：How to highlight characters after mouse hover?鼠标悬停后如何突出显示字符？
【发布时间】：2020-10-16 03:47:01
【问题描述】：

我正在尝试在 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>

【问题讨论】：

标签： html css animation css-selectors css-transitions

【解决方案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>

【讨论】：