Modifica del colore del carattere di <a> contenuto in <li>, ma al passaggio del mouse su <li> - css

Ho un <li> che contiene un <a href>

<li><a href="http://site.com">Page</a></li>

Mi piacerebbe cambiare il colore di sfondo e il colore del testo di ciascuno <li> oggetto mentre è al passaggio del mouse. Ho trovato che il colore di sfondo è cambiato al meglio facendo riferimento a li:hover e non il a:hover perché il a:hover cambia lo sfondo solo di una piccola porzione della linea (la parte che ha il <a> testo).

li:hover { background-color:green; }

Quello che mi piacerebbe anche fare è cambiare il colore del carattere (che è il <a>). Quando lo faccio il primo modo sotto, non ha alcun effetto sul <a> colore del testo. E quando lo faccio la seconda volta in basso, dovrei passare sopra il puntatore del mouse <a> per cambiare il colore del carattere, non solo in qualsiasi punto del <li> linea di proiettile.

li:hover { background-color:green; color:red; } //first way
a:hover { color:red; } //second way

C'è un modo con CSS per cambiare il colore del carattere del contenuto <a href> quando il <li> è aleggiato sopra? di nuovo, questo è come appare il markup html:

<li><a href="http://site.com">Page</a></li>

risposte:

Il modo in cui funziona su IE6 è di scegliere come target il collegamento, ma fai in modo che il link riempia l'intero spazio all'interno del link <li>:

li a { display: block; }
li a:hover { background-color: green; }

li:hover a { color: red }

: hover documentazione.

Supporto solo per IE5 / 6: passa il mouse sui collegamenti, quindi assicurati di non provare su quei browser.