CSS悬停时在子类中更改颜色吗？

Question

我目前在一个投资组合网站上工作，对于某些链接，我的某些文本用粗体显示，而其余句子则是正常的粗体。我想知道是否有一种方法只能将鼠标悬停在句子上时更改加粗部分的颜色。我知道我可以使用JavaScript来完成此任务，但是我想知道是否有一个纯CSS解决方案。

这是列表项的HTML标记：

<li>
  <a href="about.html">
     <img src="images/info-icon.png" alt="about icon"> learn more <span class="bold">about 
     me</span>
  </a>
</li>

当您将鼠标悬停在链接的任何部分上时，我只想更改粗体部分的文本颜色。我把链接放在li标记内的所有内容上，因为我认为放置不是链接的图标有点误导。谢谢！

Answer 1

仅将悬停选择器用于父级，如下所示在CSS中>>

parent-class:hover child-class{
    /* your css here */
}
因此，对于您的代码，请尝试这样

a:hover span.bold {
  color: red
}
<li>
  <a href="about.html">
     <img src="images/info-icon.png" alt="about icon"> learn more <span class="bold">about 
     me</span>
  </a>
</li>