CSS - Change State of 2 elements on hover -

CSS - Change State of 2 elements on hover -

<li class="red"> <p><a href="#">home</a></p> </li>

in css, i'd bg color of li element change, color of text has alter too. problem is, after hover of ther li element, have go farther , touch text in order it's color change.

i'll amazed if can work.

first remove <p> tag

li.red > a:hover { color: red; }

css hover