Change text and link-color inside list-element on hover

Question

I've got an ordered list like this

<ol class="tracklist">
    <li>
        <a href="www.html">LINK</a>
        <span>some text</span>
     </li>
</ol>

I want to change the color of the list-numbers, link and span upon hovering on the list element.

Therefore I have this in css:

ol.tracklist li:hover {
    background-color: #D21600;
    color: #FFFFFF;
}

It only changes the list-numbers and span's color though.

What can I do about this (without using JS).

Answer 1

Anchor tags don't inherit attributes such as color when the href attribute is present.

You can use multiple selectors to apply the same style, separate them with a comma.

ol.tracklist li:hover, ol.tracklist li:hover a {
    background-color: #D21600;
    color: #FFFFFF;
}

Answer 2

It looks like you have some extra s's in you styles

Change ol.strackslist to ol.tracklist in your css and it works.

You also need to add this for the link to change color:

ol.tracklist li:hover a, ol.tracklist li a:hover {
    color:#fff;
}

http://jsfiddle.net/jasongennaro/mje9t/1/

Answer 3

One can restore color inheritance on <a> also:

ol.tracklist li a {
    color: inherit;
}

<a> behaves like any other element thereafter. Hovers on <li> will change its color as well.