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;
}