(Answer) (Category) Faq-O-Matic für de.comm.infosystems.www.authoring.misc : (Category) dciwam-FAQ, häufig gestellte Fragen : (Category) Fragen zu praktischen Problemen : (Category) CSS, Cascading Style Sheets :

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.
Ein Link, der "gedrückt" wird, wird ja im selben Moment "besucht" und "überschwebt".

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/links

nachlesen.

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 auch
http://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: (Answer) Was ist ein Benutzer-Stylesheet?
Nächste: (Answer) Elemente mit CSS fest positionieren
Dieses Dokument ist: http://www.netandmore.de/faq/cgi/fom?file=1237
[Suche] [Darstellung] [Zeige erweiterte Funktionen]
Dies ist eine Faq-O-Matic 2.711.
  
[Sitemap]