Warum ändert sich die Farbe der Verbindung nicht, wenn ich über dem übergeordneten li schwebe?

Question

Ich habe eine einfache HTML-Liste steht, die Elemente wie folgt enthält:

li:hover { 
    background-color: #d21600; 
    color: #fff; 
} 

Die Spanne Text-Farbe:

<li> 
    <a href="http://somecool url.com/">some link</a> 
    <span class="sc-track-duration">24.27</span> 
</li> 

Auf dem Hover-Zustand ich die Text-Farbe in Weiß ändern ändert sich aber die Farbe der Verbindung nicht.

Wie kann ich das ohne JS lösen?

Answer 1

Sie müssen auch den Anker, um Stil, zum Beispiel:

li:hover, li:hover a { 
    background-color: #d21600; 
    color: #fff; 
} 

Ihr Anker hat einen spezifischeren Stil, der woanders definiert ist und das gewinnt, sogar über Ihre li:hover Regel, also müssen Sie einen spezifischeren li:hover a hinzufügen, um es auch zu stylen.

Answer 2

Sie müssen auch den Stil auf das a Element innerhalb des li hinzufügen möchten, können Sie das tun, indem Sie einfach dies tun:

li:hover, li:hover a { 
    background-color: #d21600; 
    color: #fff; 
} 

Answer 3

Sie wissen, dass der genaue Code, den Sie gepostet haben, falsch ist. Fehlende „> gibt.

<li> 
    <a href="http://somecool url.com/">link text</a> 
    <span class="sc-track-duration">24.27</span> 
</li>