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

Question

我想知道是否可以更新li块中文本的颜色，如果该块被徘徊。

所以，就像那种情况一样

<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;
}

您还可以在span中的list-items中包装元素，并为两者添加公共范围样式。