Thomas Luethi: 1 link mit 2 versch. farben/hoverfarben

Beitrag lesen

Hallo,
Das geht z.B. so:

HTML:
<p><a href="thema1.html"><span>Thema 1</span><br>Text zum Thema 1...</a></p>

CSS:

a:link, a:visited { color:#000000; background-color:#FFFFFF; }  
a:hover, a:focus  { color:#FFFFFF; background-color:#5F5F5F; }  
a:link span, a:visited span { color:#FF9F00; background-color:#FFFFFF; }  
a:hover span, a:focus span  { color:#CCCCCC; background-color:#5F5F5F; }

Beachte, dass man - wie ich es oben getan habe - zu jeder
Vordergrundfarbe auch eine Hintergrundfarbe angeben sollte,
damit der Text auf jeden Fall sichtbar/lesbar bleibt.

Um den Link - und somit auch die Hintergrundfarbe beim hover/focus - auf
die ganze Grösse der enthaltenden Box auszudehnen, könntest Du noch
folgendes hinzufügen:
a { display:block; }

Falls es noch andere Links (normal, im Fliesstext) auf der Seite hat,
was ich annehme, könntest Du z.B. die Elemente, welche die speziellen
Links enthalten, in HTML mit einer Klasse kennzeichnen und in CSS
mit einem http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=Verschachtelungs-Selektor arbeiten:

HTML:
<p class="anreisser"><a href="thema1.html"><span>Thema 1</span><br>Text zum Thema 1...</a></p>
CSS:
.anreisser a:link, .anreisser a:visited { color:#000000; background-color:#FFFFFF; }
u.s.w.

HTH, mfg
Thomas