CSS – a:visited:hover?

Lesezeit: 3 Minuten

Wie kann ich eine Schriftart anwenden color nur auf bereits gesetzte Hyperlinks visited und werden hover mit der maus?

Im Wesentlichen möchte ich Folgendes tun

a:visited:hover {color: red}

  • Dies scheint in FF zu funktionieren, aber nicht in IE 6. Gibt es eine Problemumgehung für IE 6?

    TimG

    26. August 2009 um 19:58 Uhr

Gumbos Benutzeravatar
Gumbo

Ja das ist möglich.

Hier ist ein Beispiel:

<style type="text/css">
    a:link:hover {background-color:red}
    a:visited:hover {background-color:blue}
</style>

<a href="http://www.google.com/">foo</a><a href="http://invalid/">bar</a>

  • Wird es in allen Browsern unterstützt. Scheint nicht in Firefox 3.5 zu funktionieren

    TimG

    26. August 2009 um 19:45 Uhr

  • Arbeitete für mich auf FFox 3.5 und IE7, aber nicht auf IE6.

    – jimyi

    26. August 2009 um 19:53 Uhr

  • Sie können die IE6-Unterstützung einstellen, wenn sich Ihre Benutzerbasis in den USA befindet. Sogar IE7 wird in den USA von weniger als 1 % verwendet www.theie7countdown.com

    – Chris Bier

    17. Dezember 2013 um 11:22 Uhr


Benutzeravatar von Harry The Mad Lurker
Harry der verrückte Lurker

Es gibt eine CSS-Deklarationsreihenfolge, damit dies ordnungsgemäß funktioniert, wie bereits erwähnt, obwohl es diese spezielle Option nicht abdeckt, macht es einen Unterschied. Ich habe dies auf Chrome getestet.

Die Reihenfolge ist

    a:link { color: red; }
    a:visited { color: blue; }
    a:visited:hover { color: yellow; }
    a:hover { color: green; }
    a:active { color: gray; }

Es funktioniert unabhängig davon, ob es vor oder nach a:hover kommt, solange sowohl a:hover als auch a:visited:hover nach a:visited und vor a:active stehen. Ich ziehe es einfach vor, die beiden besuchten Links zusammenzuhalten und die beiden zusammen zu schweben.

Es gibt eine Sequenz zwischen Link-CSS, um wirksam zu werden. a:hover muss nach a:link und a:visited kommen und a:active muss nach a:hover kommen. Weitere Einzelheiten finden Sie unter dem Link.

http://www.w3schools.com/css/css_pseudo_classes.asp

  • Dies ist zwar im Allgemeinen ein guter Ratschlag, gilt jedoch nicht für diese Frage. Die Frage enthält nichts, um die Reihenfolge (oder Existenz) anderer Pseudoelemente zu erwähnen, die auf Elemente und angewendet werden a:visited:hover ist spezifischer als jeder der Selektoren, die Sie in der Antwort erwähnen (und die Frage ist nicht, dass die Regel in IE6 nicht gilt, nicht darüber, dass andere Regeln außer Kraft gesetzt werden).

    – QUentin

    17. Dezember 2013 um 11:26 Uhr

  • Lieber Quentin, ich schätze Ihren Kommentar, aber die Lösung, die ich poste, ist das häufigste Problem, mit dem viele Leute konfrontiert sind, auch ich habe das gleiche Sequenzierungsproblem, nachdem ich es korrigiert und gepostet habe, weil andere Leute nicht das gleiche Problem haben.

    – Benutzer3110896

    17. Januar 2014 um 6:46 Uhr

  • Obwohl es sich um ein häufiges Problem handelt, ist es nicht das Problem, nach dem gefragt wird.

    – QUentin

    17. Januar 2014 um 6:47 Uhr

FWIW, ich konnte einfach nicht stylen color an a:visited:hover (Chrome/FF) ohne Angabe eines Hintergrunds für :link:hover (alles andere als none oder inherit scheint zu funktionieren, habe ich verwendet rgba() um Alpha willen).

Damit dies in Chrome/FF funktioniert:

a:visited:hover {
    color: #f00;
}

… (etwas wie) das muss vorhanden sein:

a:link:hover {
    background-color: rgba(255, 255, 255, 0);
}

1441580cookie-checkCSS – a:visited:hover?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy