html - 悬停时更改列表元素内的文本和链接颜色

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

当存在 href 属性时， anchor 标签不会继承 color 等属性。

您可以使用多个选择器应用相同的样式，用逗号分隔。

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