Изменить текст и цвет ссылки внутри элемента списка при наведении

Question

У меня есть такой упорядоченный список

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

Я хочу изменить цвет номеров списка, ссылки и диапазона при наведении на элемент списка.

ПоэтомуУ меня есть это в css:

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

Это только изменяет номера списка и цвет диапазона хотя.

Что я могу сделать с этим (без использования JS).

Answer 1

Теги привязки не наследуют такие атрибуты, как color, когда присутствует атрибут href.

Вы можете использовать несколько селекторов для применения одного стиля, разделяя их запятой.

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

Answer 2

Похоже, у вас есть несколько s в ваших стилях

Измените ol.strackslist на ol.tracklist в вашем css, и это работает.

Вы также должны добавить это для ссылки, чтобы изменить цвет:

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

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

Answer 3

Можно восстановить наследование цвета на <a> также:

ol.tracklist li a {
    color: inherit;
}

<a> ведет себя как любой другой элемент после этого.Наведение на <li> также изменит свой цвет.