web-dev-qa-db-fra.com

Ne changez pas la couleur du lien lorsque vous cliquez sur un lien

J'ai un lien dans une page HTML:

<a href="#foo">foo</a>

La couleur du texte du lien est à l'origine bleue. Lorsque le lien est cliqué, la couleur du texte du lien passe d'abord au rouge, puis au bleu. Je souhaite que la couleur du texte du lien ne change pas lorsque l'utilisateur clique dessus. Comment puis-je y arriver?

J'ai essayé 

a:active {
    color: none;
}

en CSS, mais pas de chance.

Et je ne veux pas utiliser ceci en CSS:

a:active {
    color: blue;
}

, car la couleur originale du texte du lien peut être autre que le bleu.

Merci.

Modifier: la page est affichée sur le navigateur de l'iPhone et je souhaite activer: pour que la couleur du texte du lien d'origine soit conservée.

htmlcsshtml5
27
Kai

vous cherchez ceci:

a:visited{
  color:blue;
}

Les liens ont plusieurs états que vous pouvez modifier ... la façon dont je me souviens d'eux est LVHFA (Lord Vador's Handle, anciennement Anakin)

Chaque lettre représente une pseudo-classe: (lien, visité, survol, focus, actif)

a:link{
  color:blue;
}
a:visited{
  color:purple;
}
a:hover{
  color:orange;
}
a:focus{
  color:green;
}
a:active{
  color:red;
}

Si vous souhaitez que les liens soient toujours bleus, changez-les tous en bleu. Je noterais toutefois que sur le plan de la convivialité, il serait agréable que le clic de la souris provoque un léger changement de couleur (même si un bleu plus clair/plus foncé) aide à indiquer que le lien a bien été cliqué une interface à écran tactile où vous n'êtes pas toujours sûr que le clic a bien été enregistré)

Si vous souhaitez que tous les types de liens aient la même couleur lorsque vous cliquez dessus, ajoutez une classe aux liens.

a.foo, a.foo:link, a.foo:visited, a.foo:hover, a.foo:focus, a.foo:active{
  color:green;
}
a.bar, a.bar:link, a.bar:visited, a.bar:hover, a.bar:focus, a.bar:active{
  color:orange;
}

Il faut noter que tous les navigateurs ne respectent pas chacune de ces options ;-)

51
scunliffe

Je pense que cela convient parfaitement à n'importe quelle couleur que vous avez:

a {
    color: inherit;
}
25
Mihai

juste donner 

a{
color:blue
}

même si c'est visité, il sera toujours bleu

7
Anish Joseph

Vous devez utiliser une valeur de couleur explicite (par exemple, #000 ou blue) pour la propriété color-. none n'est pas valide ici. La valeur initiale est spécifique au navigateur et ne peut pas être restaurée à l'aide de CSS. N'oubliez pas qu'il existe également d'autres pseudo-classes que :active.

0
jwueller