CSS 在 hover 的子类中改变颜色？

Question

I'm currently working on a portfolio website, and for some of my links I have certain text that's bolded, whereas the rest of the sentence is a normal weight. I was wondering if there was a way to only change the color on the bolded portion when you hover over the sentence. I know I can use JavaScript to accomplish this, but I was wondering if there was a pure CSS solution.

Here's my HTML markup for a list item:

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

I'd like to only change the color of the text in the bold span when you hover over any part of the link. I put the link on everything within the li tag because I thought it was a bit misleading to put icons that weren't links. Thank you!

Answer 1

use hover selector for parent only in css as below

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

so for your code try like this

 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>