Définir la couleur du lien visité à quelle que soit la couleur du lien non-visité est (P.S. pas la question habituelle)
j'ai besoin de mettre le A:CSS visité à n'importe quelle couleur la normale a est mis à.
ce que je veux pouvoir dire au navigateur est, pour les liens visités, utilisez la même couleur que les liens non visités, quelle que soit la couleur, il est .
je dois faire ce sans spécifier une couleur particulière.
comme, si un navigateur bizarre arrive qui utilise " Vert" en tant que couleur pour les liens normaux non visités, ce CSS devrait indiquer au navigateur d'utiliser le même vert pour les liens visités. Exactement quelle couleur est utilisée par le navigateur doit être transparente à mon code.. d'où l'expression "quelle que soit la couleur".
P. S. je sais comment mettre a: visité et a à une couleur particulière. Ce n'est pas ce que je demande.
P. P. S. je suis prêt à utiliser JavaScript si je dois. Mais je suis vraiment obsédé par le fait que le navigateur fasse ça.
pourquoi je voudrais faire quelque chose comme ça?
la couleur bleue que IE8 utilise pour les liens est un peu cool. Ce n'est pas # 0000FF. C'est une belle nuance de bleu. Si je veux le mettre pour les liens visités et non visités. Mais je ne devrais pas prendre une capture d'écran ou utiliser un add-on pour choisir la valeur hexadécimale exacte à chaque fois. Si IE plus tard change la couleur à une autre ombre impressionnante, ce code devrait juste fonctionner. Je ne veux pas retrouver le sortilège et le changer sur tout mon corps. code.
c'est juste une raison. Ne me donne pas le sort de ce Bleu. Trouver est facile, mais ce ne serait pas la réponse!
10 réponses
a:link{color:inherit}
a:active{color:inherit}
a:visited{color:inherit}
a:hover{color:inherit}
l'Enfer oui.
j'en avais besoin parce que certains liens texte (par opposition aux liens image) étaient une partie importante du menu Principal de mon projet, donc je les veux mes couleurs, pas les couleurs du navigateur!
chaque lien était inclus dans un groupe d'étiquettes p dont la classe avait une couleur particulière (ma couleur) définie dans CSS.
Danny Robers script fonctionne pour moi sous Firefox et Chrome (pas sûr de l'IE).
FWIW, la valeur spéciale Hyperlienttext aurait été la façon "standard" de faire ce que vous voulez, mais il a été abandonné de CSS3 dans le courant du printemps 2003.
il semble que Firefox est le seul navigateur qui a commencé à le mettre en œuvre, parce que les travaux suivants pour Firefox:
a:visited { color: - moz-hyperlienttext;}
Je ne pense pas qu'il y ait une solution CSS pure. Habituellement, vous choisiriez une couleur, et mettre à la fois un:link et a:visité cette même couleur.
j'ai essayé {couleur: hériter} mais c'était inutile.
Cette solution jQuery fonctionne bien cependant.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var normalColor = $('a:link').css('color');
$('a:visited').css('color', normalColor);
});
</script>
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="nowhereyouvebeen">No where you've been</a>
</body>
</html>
il n'y a pas moyen de faire cela en utilisant CSS. Le navigateur indique qu'un lien a été visité sur la base d'une entrée de base de données qu'il connaît, puis utilise les couleurs par défaut spécifiées dans la configuration spécifique du navigateur.
CSS physiquement juste ne peut pas obtenir la couleur de quelque chose sur la page. C'est juste la façon dont il est. La seule façon est d'utiliser javascript comme la réponse de Danny Roberts.
la raison pour laquelle je pense que sa réponse ne fonctionne pas correctement, c'est que $('a:visited') ne sélectionne que tous les liens visités à ce moment-là et que la couleur est changée pour eux.
ce que vous devez faire est de regarder pour les événements de clic et de relancer le code à chaque fois:
var normalColor = $('a:link').css('color');
$('a').click(function() {
$('a:visited').css('color', normalColor);
});
Je ne pense pas qu'il y ait une façon purement CSS d'atteindre ceci. Je pense que vous auriez besoin D'utiliser JavaScript pour obtenir la couleur de la a et puis Définir a:visited à cette couleur et cela ne fonctionnerait probablement pas dans tous les navigateurs à moins qu'il y ait un a{color:#dea} spécifié.
Presto:
$(function(){
var sheet = document.styleSheets[document.styleSheets.length-1];
sheet.insertRule(
'a:visited { color:'+$('a:link').css('color')+'; }',
sheet.length
);
});
j'ai testé et je peux confirmer cela fonctionne dans Chrome. Gardez toutefois à l'esprit que sheet vous ajoutez les règles pour -- assurez-vous que son attribut média s'applique aux médias que vous aimez. En outre, si vous avez des règles qui outrepassent la coloration a , cela ne fonctionnera probablement pas correctement -- alors assurez-vous de votre les feuilles de style sont claires.
Je ne suis pas sûr que ce soit une pratique très sage de toute façon. Personnellement, je définit toujours explicitement les couleurs de mes liens pour chaque site.
PS:
Apparemment IE (je ne connais pas les versions) insiste sur leur propre syntaxe:
sheet.addRule('a:visited', $('a:link').css('color'), -1);
peu importe. Voir mon autre réponse pour quelque chose de plus spécifiquement pertinent à la question de l'asker.
je fais ceci:
a, a:visited { color:#4CA1F6; }
a:hover { color:#4CB6E1; } a:active { color:#0055AA; }
maintenant que ce fil m'a fait penser bien, et j'ai fait les améliorations suivantes à ma méthode:
a:link, a:visited { color:#4CA1F6; }
a:hover, a:focus { color:#4CB6E1; }
a:active { color:#0055AA; }
j'avais besoin d'une solution pour faire comme le suggère le titre de cette question"définir la couleur du lien visité à quelle que soit la couleur du lien non visité". Pour moi, j'avais besoin d'un moyen pour effectuer une comparaison d'image de contenu de page de navigateur des captures d'écran que j'utilise pour les tests de régression (pdiff - diff perceptual). Voici le code qui a fonctionné pour moi.
(function(){
var links = document.querySelectorAll('a');
for (var i=0; i<links.length; i++) {
var link = links[i];
if (link.href) { //must be visitable
var rules = window.getMatchedCSSRules(link) || [];
var color = '#0000EE' //most browsers default a:link color;
for (var j=0; j<rules.length; j++) {
var rule = rules[j];
var selector = rule.selectorText;
color = rule.style['color'] || color;
}
link.setAttribute('style','color:' + color + ' !important');
//this was enough for me but you could add a 'a:visited' style rule to the rule set
}
}
})();
a:link, a:visited {color: inherit;}
a:hover, a:focus {color:inherit;}
a.one:link {
color:#996600;
background-color:transparent;
text-decoration:underline;
}
a.one:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a.one:visited {
color: #996600;
background-color: transparent;
text-decoration: underline
}
a.one:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}