Comment puis-je faire des liens HTML montrent le style hover?

Question

J'ai un balisage HTML dans ma page maître ASP.NET représentant un menu de navigation de base. Trois mots qui pointent vers trois pages. Mon CSS et HTML sont inclus ci-dessous pour votre référence.

Lorsque je charge la page, les liens apparaissent avec la couleur correcte (rouge). Si je survole un lien, le lien change pour la couleur correcte (bleu). Jusqu'à présent, nous sommes bons. En cliquant sur un lien, la couleur du lien devient la couleur correcte (jaune). Les deux liens restants sont toujours rouges/bleus comme prévu. En cliquant sur un deuxième lien, ce lien devient également jaune. Maintenant, j'ai deux liens jaunes. Ni l'un ni l'autre des liens jaunes n'affiche la couleur du survol (bleu) comme je le souhaiterais. En cliquant sur le troisième lien, il est également jaune et aucun des liens n'affiche le style.

Bien qu'un lien ait été cliqué, j'aimerais que la couleur soit enregistrée et que la couleur du survol soit affichée. Comment puis-je accomplir cela? C'est un projet d'application web ASP.NET mais je n'utilise que du HTML à ce stade.

/* --- css --- */ 

a:link 
{ 
    color: red; 
    text-decoration: none; 
} 

a:hover 
{ 
    color: blue; 
    text-decoration: none; 
} 

a:active 
{ 
    color: green; 
    text-decoration: none; 
} 

a:visited 
{ 
    color: yellow; 
    text-decoration: none; 
} 



/* --- HTML --- */ 

<p class="MenuItems"> 
    <a href="1.aspx">Cars. </a> 
    <a href="2.aspx">Trucks. </a> 
    <a href="3.aspx">Vans. </a> 
</p> 

Answer 1

Votre

a:hover 

déclaration

doit venir après votre

a:visited 

déclaration

dans la feuille de style parce que l'État visité prend actuellement la priorité. Placez toujours hover à la fin du bloc de déclaration d'un style pour empêcher cela. A: link -> a: visité -> a: actif -> a: hover est l'ordre optimal.

Answer 2

Comme décrit here, la déclaration :hover doit venir après les déclarations :visited et :active. En principe, dans la cascade de vos styles actuels, vous ne verrez jamais la couleur :hover.

Answer 3

Il suffit d'utiliser ceci:

a:hover 
{ 
    color: blue ! important; 
    text-decoration: none ! important; 
} 

ou comme décrit - utilisez cette commande:

a:link 
{ 
    color: red; 
    text-decoration: none; 
} 

a:active 
{ 
    color: green; 
    text-decoration: none; 
} 

a:visited 
{ 
    color: yellow; 
    text-decoration: none; 
} 

a:hover 
{ 
    color: blue; 
    text-decoration: none; 
}