a: hover nicht funktioniert

Question

HTML

<table width="100%"> 
<tr> 
    <td width="90%"></td> 
    <td><a href="#" id="logout"><strong>Logout</strong></a></td> 
</tr> 
</table> 

CSS

@charset "utf-8"; 
/* CSS Document */ 

#logout { 
color:#BBB; 
} 

a:hover { 
color:#FFF; 
} 

Obwohl die Farbe der Abmeldung zu sein scheint, was in der CSS gegeben ist, wird die Farbe nicht ändern, wenn Ich platziere meine Maus über den Link (zu weiß). Was ist der Grund ?

Ich muss sagen, es gibt andere CSS-Dateien, die dazu neigen, die Farbe der Verknüpfung zu ändern, wenn die Maus über sie platziert wird und sie funktionieren gut.

Answer 1

Ein id-Selektor (#logout) ist spezifischer dann ein Typselektor (a) plus eine Pseudo-Klasse (:hover), so dass Ihr erster Regelsatz wird immer win the cascade.

Verwenden Sie stattdessen #logout:hover.

Answer 2

Vereinfachen:

Sie haben zwei CSS-Regeln, die für diese Anker gelten.

Beide Regeln ändern die Farbe.

Es kann nur eine Regel angewendet werden; nur eine Farbe kann gewählt werden.

Der Browser muss zwischen der Regel basierend auf einer ID (#logout) und einer auf dem Elementtyp basierenden Regel (<a>) wählen.

Die Regel basierend auf ID gewinnt in dieser Situation. Es ist spezifischer, eine ID anzugeben, als alle Elemente eines Typs (Anker) anzugeben.

Answer 3

Sie haben eine Hierarchie-Sequenz folgen:

Link Hover, besuchte

Zum Beispiel:

a:link 
{ 
text-decoration:none; 
color:#008b45; 
} 

a:hover 
{ 
margin-bottom: 3px solid #ff7400; 
    background:white; 
} 

a:visited 
{ 
color:#ee9a00; 
}