it-swarm.com.de

Setzen Sie die Farbe der besuchten Links auf die Farbe des nicht besuchten Links (nicht die übliche Frage)

Ich muss die a: besuchte CSS auf egal setzen, auf die die normale a gesetzt ist.

Was ich dem Browser mitteilen möchte, ist: Verwenden Sie für die besuchten Links dieselbe Farbe wie die nicht besuchten Links, unabhängig davon, um welche Farbe es sich handelt.

Ich muss dies tun, ohne eine bestimmte Farbe anzugeben.

Wenn beispielsweise ein komischer Browser erscheint, der "grün" als Farbe für normale, nicht besuchte Links verwendet, sollte dieses CSS den Browser anweisen, das gleiche Grün für besuchte Links zu verwenden. Welche Farbe genau vom Browser verwendet wird, sollte für meinen Code transparent sein. Daher die Phrase "Welche Farbe auch immer".

P.S. Ich weiß, wie man ein: besucht und eine bestimmte Farbe einstellt. Das frage ich nicht.

P.P.S. Ich bin bereit, JavaScript zu verwenden, wenn ich muss. Aber ich bin wirklich begeistert, wenn ich den Browser dazu bringe.

Warum sollte ich so etwas tun wollen, fragen Sie? 

Die blaue Farbe, die IE8 für Links verwendet, ist irgendwie cool. Es ist nicht # 0000FF. Es ist ein schönes Blau. Ich möchte es also für besuchte und nicht besuchte Links setzen. Aber ich sollte keinen Screenshot machen oder ein Add-On verwenden, um jedes Mal den exakten Hex-Wert auszuwählen. Wenn IE später die Farbe in einen anderen tollen Farbton ändert, sollte dieser Code einfach funktionieren. Ich möchte das Hex nicht wiederfinden und es in meinem Code ändern.

Dies ist nur ein Grund. Gib mir nicht das Feld für das Blau. Das herauszufinden ist einfach, aber das wäre nicht die Antwort!

47
anon355079
a:link{color:inherit}
a:active{color:inherit}
a:visited{color:inherit}
a:hover{color:inherit}

Auf jedenfall.

Ich brauchte das, weil einige Textlinks (im Gegensatz zu Image-Links) einen wesentlichen Teil des Hauptmenüs meines Projekts bildeten. Ich möchte, dass sie MEINE Farben und keine Browserfarben verwenden.

Jeder Link war in einer p-Tag-Gruppe eingeschlossen, deren Klasse eine bestimmte Farbe (MY-Farbe) in CSS hatte.

8
Fintan

Danny Robers-Skript funktioniert für mich in Firefox und Chrome (nicht sicher über den IE). 

FWIW, der spezielle Wert HyperlinkText wäre die "Standardmethode" gewesen, um das zu tun, was Sie wollen, aber es wurde irgendwann im Frühjahr 2003 aus CSS3 entfernt.

Es sieht so aus, als sei Firefox der einzige Browser, der mit der Implementierung begonnen hat, da folgende Funktionen für Firefox funktionieren:

a: besuchte {color: -moz-hyperlinktext; }

4
Dean Brettle

Es gibt keine Möglichkeit, dies mit CSS zu tun. Der Browser gibt an, dass ein Link basierend auf einem Datenbankeintrag besucht wurde, von dem nur er weiß, und verwendet dann die in der jeweiligen Browserkonfiguration angegebenen Standardfarben.

CSS kann einfach nicht die Farbe von etwas auf der Seite erhalten. So ist es eben. Die einzige Möglichkeit ist, Javascript wie Danny Roberts 'Antwort zu verwenden.


Ich denke, dass seine Antwort nicht korrekt funktioniert, weil $('a:visited') einfach alle besuchten Links zu diesem Zeitpunkt auswählt und dann die Farbe für sie ändert.

Was Sie tun müssen, ist auf Klickereignisse zu achten und den Code jedes Mal erneut auszuführen:

var normalColor = $('a:link').css('color');
$('a').click(function() {
    $('a:visited').css('color', normalColor);
});
3
Marcus Whybrow

Ich glaube nicht, dass es eine reine CSS-Lösung gibt. Normalerweise würden Sie eine Farbe auswählen und sowohl einen: Link als auch einen: dieselbe Farbe aufrufen.

Ich habe es versucht, aber das war nutzlos.

Diese jQuery-Lösung funktioniert jedoch hervorragend.

<!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>
3
Danny Roberts

Ich glaube nicht, dass es einen reinen CSS-Weg gibt, um dies zu erreichen. Ich denke, Sie müssten JavaScript verwenden, um die Farbe von a zu erhalten und dann a: visit auf diese Farbe zu setzen. Dies würde wahrscheinlich nicht in allen Browsern funktionieren, es sei denn, es wurde eine {color: #dea} angegeben.

1
easement

Presto:

$(function(){
  var sheet = document.styleSheets[document.styleSheets.length-1];
  sheet.insertRule(
    'a:visited { color:'+$('a:link').css('color')+'; }',
    sheet.length
   );
});

Ich habe getestet und kann bestätigen, dass dies in Chrome funktioniert. Beachten Sie jedoch, zu welcher sheet Sie die Regeln hinzufügen, um sicherzustellen, dass das Attributmediafür das Medium gilt, das Sie interessieren. Wenn Sie über Regeln verfügen, die die Farbvariable a überschreiben, funktioniert dies wahrscheinlich nicht richtig - stellen Sie also sicher, dass Ihre Stylesheets davon frei sind.

Ich bin mir nicht so sicher, ob dies eine sehr weise Praxis ist. Persönlich definiere ich meine Linkfarben für jede Site explizit. 

PS:

Anscheinend besteht IE (weiß nicht, welche Versionen) auf ihrer eigenen Syntax:

sheet.addRule('a:visited', $('a:link').css('color'), -1);
0
ChaseMoskal

Ich benötigte eine Lösung, um zu tun, da der Titel dieser Frage besagt, dass "Farbe für besuchte Links auf die Farbe des nicht besuchten Links setzen soll". Für mich brauchte ich eine Möglichkeit, einen Bildvergleich der Bildschirminhalte von Browserseiteninhalten durchzuführen, die ich für Regressionstests (pdiff - perceptual diff) verwende. Hier ist der Code, der für mich funktioniert hat.

(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
    }
  }
})();
0
kernowcode

Vergiss das nicht. Sehen Sie meine andere Antwort für etwas spezifischeres, das für die Frage des Fragestellers relevant ist.

Ich mache das:

a, a:visited { color:#4CA1F6; }
a:hover      { color:#4CB6E1; } a:active  { color:#0055AA; }

Nun, da dieser Thread mich jedoch zum Nachdenken bringt,, und ich habe die folgenden Verbesserungen an meiner Methode vorgenommen:

a:link, a:visited { color:#4CA1F6; }
a:hover, a:focus  { color:#4CB6E1; } 
a:active          { color:#0055AA; }
0
ChaseMoskal