css - 通过 css 更改悬停的 li 中的文本颜色

Question

我想知道如果 li-block 悬停时是否可以更新 li-block 中文本的颜色。

所以，像那种情况

<li><h3>Foo</h3><p>Supertext</p></li>

我有

li:hover{
background:red;
}

我也想有能力做

li:hover{
background:red;
color:green !important; //But that doesn't work
}

有机会通过 css 做到这一点吗？ JSBIN.

Answer 1

将此添加到您的 CSS:

li:hover p  {
    color: black;
    background-color: white;
}
li:hover h3  {
    color: black;
    background-color: white;
}

(当然相应地改变颜色)

或者您可以像这样将悬停添加到列表项:

li p:hover   {
    color: black;
    background-color: red;
}
li h3:hover   {
    color: black;
    background-color: red;
}

您还可以将列表项中的元素包装在一个跨度中，并为两者添加一个通用的跨度样式。