Why isn't the link's color changing when I hover above its parent li?

I've got a simple html-list which contains elements like this:

<li>
   <a href="http://somecool url.com/">some link</a>
   <span class="sc-track-duration">24.27</span>
</li>

On the hover-state I change the text-color to white:

li:hover {
   background-color: #d21600;
   color: #fff;
}

The span's text-color changes but the link's color doesn't.

How can I solve this without using J开发者_开发问答S?

You need to style the anchor as well, for example:

li:hover, li:hover a {
   background-color: #d21600;
   color: #fff;
}

Your anchor has a more specific style defined elsewhere and that's winning, even over your li:hover rule, so you need to add a more specific li:hover a to get it styled as well.

You also need to add the style to the a element within the li, you can do that by simply do this:

li:hover, li:hover a {
   background-color: #d21600;
   color: #fff;
}

You know the exact code you posted is wrong. Missing "> there.

<li>
   <a href="http://somecool url.com/">link text</a>
   <span class="sc-track-duration">24.27</span>
</li>