a:hover ne fonctionne pas

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

Bien que la couleur de la déconnexion semble correspondre à ce qui est indiqué dans le fichier css, la couleur ne change pas lorsque je place ma souris sur le lien. (vers le blanc) . Quelle en est la raison ?

Je dois dire qu'il y a d'autres fichiers css qui ont tendance à changer la couleur du lien lorsque la souris est placée dessus et ils fonctionnent bien.

Answer 1

Un sélecteur d'identité ( #logout ) est plus spécifique qu'un sélecteur de type ( a ) plus une pseudo-classe ( :hover ), de sorte que votre premier jeu de règles sera toujours gagner la cascade .

Utilisez #logout:hover à la place.

Answer 2

Simplifier :

Deux règles CSS s'appliquent à cette ancre.

Les deux règles changent la couleur.

Une seule règle peut s'appliquer ; une seule couleur peut être choisie.

Le navigateur doit choisir entre la règle basée sur un ID ( #logout ) et une règle basée sur le type d'élément ( <a> ).

La règle basée sur l'identification l'emporte dans cette situation. Il est plus spécifique de spécifier un ID que de spécifier tous les éléments d'un type (ancre).

Answer 3

Vous devez suivre une séquence hiérarchique :

Lien, Survol, Visité

Par exemple :

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

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

a:visited
{
color:#ee9a00;
}

Answer 4

C'EST PARTI ! JUSTE COPIER ET COLLER

#logout{
color:#bbb;
}

#logout :hover{
color: #fff;
}

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