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

Posted 2023-03-06

【中文标题】鼠标悬停后如何突出显示字符？

【英文标题】：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>

【参考方案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>