nicht angemeldet
CSS Hoverfehler mit Klassen???
Hallo
habe folgendes Problem. Habe mir für die Webseite eine css-Datei erstellt, die für verschiedene Links Klassen hat. Meine Links sollen beim Hover ein underline haben und bei sonst. gar nichts. Aber sobald der Links visited ist, also ich schon mal aufgerufen habe, dann funktioniert das underline beim hover nicht mehr? Hat irgendjemand eine Ahnung was ich falsch gemacht habe?? Anbei der Ausschnitt aus der CSS:
MfG
Holger
A.a-text:link {color: #FFFFFF; text-decoration: none}
A.a-text:visited {color: "#FFFFFF"; text-decoration: none}
A.a-text:active {color: "#FFFFFF"; text-decoration: none}
A.a-text:hover {text-decoration: underline; color: 3e3e3e; background-color: bfbfbf}
a.a-index:hover { text-decoration: underline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; letter-spacing: 4px; color: #bfbfbf}
a.a-index:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; letter-spacing: 4px ; color: #bfbfbf; text-decoration: none; list-style-position: outside; list-style-type: squate}
a.a-index:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; text-decoration: none ; letter-spacing: 4px ; color: #bfbfbf }
a.a-index:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; text-decoration: none; letter-spacing: 4px ; color: #bfbfbf }
a.a-index2:hover { text-decoration: underline ; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; ; background-color: bfbfbf}
a.a-index2:link { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none ; font-size: 10px; color: #000000;}
a.a-index2:active { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none ; font-size: 10px; color: #000000 }
a.a-index2:visited { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none ; font-size: 10px; color: #000000 }
-
Tag auch
a.a-index:hover { ... }
a.a-index:link { ... }
a.a-index:active { ... }
a.a-index:visited { ... }Na dann überlegen wir doch mal, was ein Browser mit diesen Angaben macht, wenn solch ein Link mit der Maus berührt wird.
1. Der Browser stellt fest, daß sich die Maus über dem Link befindet. Demzufolge wendet er zunächst a:hover an.
2. Da der Link link ist (Hehe!), wird anschließend a:link über a:hover "gelegt".
3. active ist er nicht -> ignorieren.
4. Schließlich stellt der Browser fest, daß der Link visited ist und verwendet brav nach dem Motto "Wer zuletzt kommt, mahlt zuerst" a:visited.
Und genau so sieht der Link zum Schluß aus.Daraus lernen wir, daß die richtige Reihenfolge
1. a:link
2. a:visited
3. a:hover
4. a:active
lauten muß.Thomas J.
-
hi,
mehr zur richtigen Reihenfolge der CSS.Angaben fuer Links findest Du hier:
http://www.bjoernsworld.de/css/typische-fehler.htmlVielleicht nutzt es was.
Gruss Joachim
-
hi
A.a-text:link {color: #FFFFFF; text-decoration: none}
A.a-text:visited {color: "#FFFFFF"; text-decoration: none}
A.a-text:active {color: "#FFFFFF"; text-decoration: none}
A.a-text:hover {text-decoration: underline; color: 3e3e3e; background-color: bfbfbf}das hiervon außer :link irgendeiner überhaupt farblich Wirkung zeigt, grenzt an ein Wunder! Die korrekte Syntax für Farben ist #000000; (bei schwarz). Das wichtigste ist, dass dort KEINE "" drum sind und das # vorne. Dafür sind die hier (im gegensatz zu denen unten) in der richtigen Reihenfolge.
Grüße aus Lüneburg
Kai
-
Vielen Dank für die schnellen Antworten. Hat jetzt alles geklappt.
Happy Proggin'
CU HOlger