改变鼠标悬停CSS上的所有内容

Question

我的html代码是这样的：

<li class="sprite-ps2 wishlist">
<a href="/wishlist/">
My Wish
<br>
List
<p>
<i class="fa fa-list-alt fa-3x"></i>
</p>
</a>
</li>

我需要更改蓝色的 li 背景，并将其中的所有内容更改为颜色：鼠标悬停在li元素上的白色。

Answer 1

请参阅此fiddle，您需要为li:hover设置背景蓝色，并将li:hover *设置为白色

li:hover {
  background: blue;
}
li:hover,
li:hover * {
  color: #fff;
}

<li class="sprite-ps2 wishlist">
  <a href="/wishlist/">
My Wish
<br>
List
<p>
<i class="fa fa-list-alt fa-3x"></i>
</p>
</a>
</li>

Answer 2

将以下内容放在＆lt; style＆gt;中元素或.css文件：

li:hover {
    background-color: blue;
    color: white;
}

因为＆lt; li＆gt;内的所有子元素都是继承其父级的属性，它们将具有白色（如果它们没有指定自己的蓝色背景，则也是如此）。