Richtige Reihenfolge der link-Pseudo-Klassen
Meine Links werden nicht so dargestellt, wie ich das in den Cascading Style Sheets angegeben habe. Was tun?
Falls du Pseudo-Klassen verwendest, liegt das Problem möglicherweise in der Reihenfolge der Regeln für die Links. Ändere sie in:
a:link { color: red }
/* link pseudo-class, noch nicht besuchter Link */
a:visited { color: blue }
/* link pseudo-class, schon besuchter Link */
a:hover { color: yellow }
/* dynamic pseudo-class, Benutzer 'hovert' */
a:active { color: lime }
/* dynamic pseudo-class, Link wird ausgewählt */
a:focus { color: lime }
/* dynamic pseudo-class, Element akzeptiert Eingaben */
Jeder Link ist entweder noch nicht besucht worden oder er wurde bereits besucht. Falls
er noch nicht besucht wurde, gilt die a:link-Pseudo-Klasse. Falls er bereits
besucht wurde, dann gilt die a:visited-Pseudo-Klasse. Er kann zusätzlich
zum "Zustand" visited (bzw. not-visited) noch den "Zustand" a:hover (für "darüber
schwebend") und a:focus (ist ausgewählt / hat den Fokus) annehmen.
Definierst du a:hover vor a:visited, dann überschreibt die
Definition für a:visited die Definition für a:hover.
Definierst du dagegen a:hover nach a:visited,
dann überschreibt die Definition für a:hover die
Definition für a:visited.
Damit sollte auch klar sein, warum a:active nach a:hover stehen
sollte. a:active definiert die Eigenschaften, die ein aktiver Link (ein Link,
auf den du gerade "draufdrückst") hat. Er besitzt die Eigenschaften not-visited oder
visited und hover und active.
Ein besuchter Link oder ein Link über den man gerade mit der Maus fährt etc. ist eben auch ein Link, deshalb gehen die Regeln mit den Selektoren in die Kaskade ein.
Der Unterschied zwischen a:active und a:focus ist am besten
zu verstehen, wenn man einen Link per Tastatur anspringt, statt mit der Maus drauf zu klicken.
Mit Tastatur gibt es den Unterschied zwischen tab=ausgewählt (hat den Fokus) und return=aktiviert.
Mit der Maus gibt es nur klick=aktiviert.
Siehe dazu:
http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes
Hinweis
Bei der Definition einer Textfarbe (color) sollte möglichst auch immer
eine Hintergrundfarbe angeben werden (background-color bzw. background).
Oft wird background-color: transparent verwendet, wenn keine Hintergrundfarbe
erwünscht ist. Jedoch macht transparent bei Netscape 4.xx die bekannten
abenteuerlichen Fehler:
Ältere Browser unterstützen die Pseudo-Klassen nicht vollständig. Von daher
ist es eventuell besser auf background-color: transparent zu verzichten und
eine Validator-Warnung in Kauf zu nehmen. Es sei denn transparent wird
in Verbindung mit background-image benötigt.
Siehe dazu:
http://css.nu/pointers/bugs.html oder
auch
http://www.webreview.com/style/css1/charts/notes.shtml#532transparent
Rene v. Bulmerincq · http://www.inforunner.de
Huschiar Madjidi · http://www.netandmore.de
Gérard Schneider
