web-dev-qa-db-fra.com

Désactiver le changement de couleur de la balise d'ancrage lors de la visite

Je dois désactiver le changement de couleur d'une balise d'ancrage lors de la visite. J'ai fait ça:

a:visited{ color: gray }

(Le lien est de couleur grise avant la visite.) Mais c’est une façon pour laquelle j’affirme explicitement la couleur après la visite du lien, ce qui correspond à nouveau à un changement de couleur.

Comment puis-je désactiver le changement de couleur d'une balise d'ancrage lors d'une visite sans effectuer de changement de couleur explicite?

htmlcssanchor
70
popcoder

Tu ne peux pas. Vous pouvez seulement styler l'état visité.

Pour les autres personnes qui trouvent cela, assurez-vous de les avoir dans le bon ordre:

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */
78
Rich Bradshaw

Si vous voulez simplement que la couleur d'ancrage reste la même que l'élément parent de l'ancre, vous pouvez utiliser hériter:

a, a:visited, a:hover, a:active {
  color: inherit;
}

Notez qu'il n'est pas nécessaire de répéter la règle pour chaque sélecteur; utilisez simplement une liste de sélecteurs séparés par des virgules (l'ordre est important pour les pseudo-éléments d'ancrage). En outre, vous pouvez appliquer les pseudo-sélecteurs à une classe si vous souhaitez désactiver sélectivement les couleurs d'ancrage spéciales:

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
  color: inherit;
}

Votre question ne concerne que l'état visité, mais j'ai supposé que vous parliez de tous les états. Vous pouvez supprimer les autres sélecteurs si vous souhaitez autoriser les modifications de couleur sur toutes les personnes visitées.

164
Ryan

Pour :hover pour remplacer :visited, et pour être sûr que :visited est identique à la couleur initiale, :hover doit venir après :visited.

Donc, si vous voulez désactiver le changement de couleur, a:visited doit venir avant a:hover. Comme ça:

a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }

Pour désactiver :visited changez le style avec une classe non pseudo:

a, a:visited { color: gray; }
a:hover { color: red; }
11
Rob Lokhorst

Je pense que si je mets une couleur pour a:visited ce n’est pas bon: vous devez connaître la couleur par défaut de la balise a et la synchroniser à chaque fois avec a:visited.

Je ne veux pas connaître la couleur par défaut (elle peut être définie dans common.css de votre application, ou vous pouvez utiliser des styles extérieurs).

Je pense que c'est une bonne solution:

HTML:

<body>
    <a class="absolute">Test of URL</a>
    <a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

CSS:

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}
0
Smagin Alexey

Supprimez le sélecteur ou réglez-le sur la même couleur que votre texte apparaît normalement.

0
Kyle