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{&nbsp; &nbsp; /* your css here */}所以对于你的代码试试这样a:hover span.bold {&nbsp; color: red}<li>&nbsp; <a href="about.html">&nbsp; &nbsp; &nbsp;<img src="images/info-icon.png" alt="about icon"> learn more <span class="bold">about&nbsp;&nbsp; &nbsp; &nbsp;me</span>&nbsp; </a></li>