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

我目前正在一个公文包网站上工作，对于我的一些链接，我有一些加粗的文本，而句子的其余部分是正常的权重。我在想，当你把鼠标悬停在句子上方时，是否有办法只改变粗体部分的颜色。我知道我可以使用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标签内的所有东西上，因为我认为把非链接的图标放在上面有点误导。谢谢大家!

在css中仅对父对象使用悬停选择器，如下所示

parent-class:hover child-class{
    /* your css here */
}

因此，对于您的代码，请尝试这样做

a：悬停span.bold{
颜色：红色
}

a:悬停span.bold{color:}

开枪我觉得自己很笨！！谢谢：）