|
|
Die richtige Reihenfolge der Link-Pseudoklassen |
Frage:Meine Links werden nicht so dargestellt, wie ich das in den Cascading Style Sheets angegeben habe. Was tun? Antwort:Falls du Pseudo-Klassen verwendest, lieg 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 ist bereits besucht worden. 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") annehmen. Definierst du a:hover vor a:visited, dann "überschreibt" die Definition für a:visited die Definition für a:hover, da du a:visited nach a:hover definiert hast. Definierst du dagegen a:hover nach a:visited, dann "überschreibt" die Definition für a:hover die Definition für a:visited, denn a:hover hast du nach a:visited definiert. Jetzt sollte auch klar sein, warum a:active als Letztes stehen sollte. a:active definiert die Eigenschaften, die ein aktiver Link (ein Link, auf den du gerade "draufdrückst") hat. So ein active-Link besitzt die Eigenschaften (not-)visited UND hover UND active. Besucher "drückt auf" den Link. Ergebnis: lime, denn die letzte der
Eigenschaften zählt. a:link { color: red }
a:visited { color: blue }
a:active { color: lime }
a:hover { color: yellow }
Besucher "drückt auf" auch hier auf den Link. Ergebnis: yellow. Mehr dazu kannst du auf:http://www.people.fas.harvard.edu/~dbaron/css/1999/09/linksnachlesen. Beachte:Bei der Definition einer Textfarbe ('color') möglichst auch immer eine Hintergrundfarbe mit angeben ('background-color' bzw. 'background'). 'Background-Color: Transparent;' wird oft gerne verwendet, wenn keine Hintergrund Farbe erwünscht ist. Jedoch Transparent macht bei Netscape 4.xx die bekannten abenteuerlichen Fehler: siehe dazu:http://css.nu/pointers/bugs.html oder auchhttp://www.webreview.com/style/css1/charts/notes.shtml#532transparent Nicht alle Browser unterstützen vollständig die Pseudo-Klassen. Von daher ist es besser auf 'Background-Color: transparent;' zu verzichten und lieber eine Validator-Warnung im Kauf nehmen. Es sei denn, 'transparent' wird in Verbindung mit 'background-image' benötigt,um einen bestimmten visuellen Effekt zu erreichen,aber die Nachteile für Cascading muß man dann in Kauf nehmen. Fußnote:Der Unterschied zwischen a:active und a:focus wird wohl klarer, wenn man einen Link per Tastatur anspringt statt mit der Maus draufklickt. Mit Tastatur gibt es den Unterschied zwischen 'tab=ausgewählt=focus' und 'return=aktiviert=active', mit der Maus gibt es da keinen Unterschied.
Siehe dazu: http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes(Björn Höhrmann, Rene v. Bulmerincq, md) | |
| [Diesen Eintrag erweitern] | |
| Vorhergehende: |
|
| Nächste: |
|
| ||||||||||
| [Sitemap] |