在悬停时更改list-element内的文本和链接颜色

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

将css中的ol.strackslist更改为ol.tracklist即可。

您还需要为链接添加此项以更改颜色：

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>上的悬停也会改变它的颜色。