在悬停时更改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;
}

当`href`存在时,`<a>`标签不会继承诸如`color`之类的属性.[此答案]中的更多信息(http://stackoverflow.com/questions/1144931/when-will-a-tag-not-inherit-color-attribute-of-parent-tag). (2认同)
具有`href`属性的锚不继承父颜色`颜色'的技术原因是因为浏览器为`a:link`和朋友定义了默认颜色,这些颜色优先,它们的样式覆盖了继承的样式. (2认同)

Answer 2

看来你的风格中有一些额外的s

在你的CSS中更改ol.strackslist为ol.tracklist，它就可以工作了。

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

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