Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

Pseudo-Klassen a:visited, a:hover, a:focus und a:active

Was a:hover bedeutet, weiss jeder, der mal die Nase an eine CSS-Datei gehalten hat. Die Pseudo-Klassen a:visited, a:focus und a:active sind weit weniger bekannt. Mir war jedenfalls lange nicht klar, was die Angaben genau bewirken.

a:hover

Über den Selektor a spricht man im CSS einen Link an, mit a:hover lässt sich dem Link ein Effekt mitgeben, der auftritt, sobald die Maus drüberfährt. In Beispiel unten ändert sich die Farbe des Links von Rot in Blau.

a {color: red;}
a:hover {color: blue;}

For the record: Auf Touch-Geräten funktioniert der hover-Effekt nicht.

Was ist der Unterschied zwischen a und a:link?

In manchen CSS-Dateien findet man die Schreibweise a:link {…} anstatt von a {…}.
Die Pseudo-Klasse a:link bezieht sich auf Anchor-Elemente, die ein href-Attribut haben. Was ein bisschen sinnfrei ist, denn dieses Attribut sollte jeder Link haben. Ein Link ist – ein Link und verweist immer auf eine interne oder externe URL.
Wenn nur eine Aktion durch Anklicken ausgelöst werden soll, ist button das Tag der Wahl. Ein Button triggert eine JavaScript-Aktion oder ist Teil eines Formulars.

Wer korrektes HTML pflegt, kann also getrost a statt a:link schreiben.

a:visited

Die Pseudo-Klasse a:visited wird aktiv, sobald ein Link einmal angeklickt wurde. Der Nutzer kann so erkennen, wo er schon mal war. Bei Seiten mit vielen Inhalten und vielen Links kann das sehr hilfreich sein.

Ich wähle für den visited-Status meist eine etwas abgedunkelte Variante der Linkfarbe. Wenn die Haupt-Navigation nur wenige Elementen hat, nehme ich diese Links aus der Systematik heraus. Da man sie sowieso mehrfach anklickt, hat es meiner Meinung nach nicht so viel Sinn, den visited-Status in der Navigation zu kennzeichnen.

Übrigens: :visited und :hover lassen sich auch kombinieren:

a:visited:hover {
  color: purple;
}

a:focus

a:focus ist wichtig für die Navigation per Keyboard. Sobald der Nutzer per Tab-Taste einen Link erreicht, wechselt der Link in den focus-Zustand. Der Nutzer kann dadurch erkennen, welchen Link er gerade angesteuert (= im Fokus) hat.

Die Pseudo-Klassen :hover, :focus und :active können auch auf andere Elemente angewendet werden, zum Beispiel auf Formular-Elemente. Das Element reagiert dann nicht nur auf die Tastatur, sondern auch auf einen Mausklick.

a:active

a:active gibt dem Nutzer die Rückmeldung ”Du hast gerade diesen Link angeklickt”. Was auf den ersten Blick banal klingt, ist eine wichtige Hilfestellung für Nutzer, die unsicher sind oder motorische Probleme haben.

Das Verhalten dieses Link-Zustands ist ein wenig schwer zu beschreiben. Das Styling wird nur für einen extrem kurzen Moment sichtbar, nachdem der Link angeklickt wurde.

Am besten, ihr probiert es mal aus:


Die Reihenfolge im CSS

Die Pseudo-Klassen müssen in der CSS-Datei in einer bestimmten Reihenfolge geschrieben werden. Stimmt die Reihenfolge nicht, werden die Angaben überschrieben. Käme beispielsweise a:hover nach a:visited, würde die Angaben für a:hover die Angaben für a:visited überschreiben.

Die richtige Reihenfolge ist: link, visited, hover, focus, active.

a {color:red; }
a:visited {color:crimson; }
a:hover {color:blue; }
a:focus {background-color:red; color:white;}
a:active {text-decoration:underline;}

Fazit

Pseudo-Klassen für Links geben den Besuchern wichtige Rückmeldungen beim Navigieren durch eine Seite. Wir können dadurch das Risiko eingrenzen, dass die Besucher aus Versehen auf Links klicken und irgendwo landen, wo sie eigentlich gar nicht hin wollten. Menschen, die den Faden verloren haben, machen einfach den Tab zu und verlassen die Seite.
Es ist deshalb sinnvoll, im CSS immer alle Link-Zustände zu definieren und keinen auszulassen.