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

Question

I have the html code something like this:

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

I need to change background of li in blue color and everything inside of them to be color:white on mouse hover on the li element.

Answer 1

See this fiddle , you need to set background blue for li:hover , and li:hover * to be color white

 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

Put the following in a <style> element or a .css file:

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

Because all child elements inside <li> inherit the properties of their parent, they will have a white color (and a blue background too if they don't specify their own).