1 link mit 2 versch. farben/hoverfarben

[cta]

Hallo!

Ich möchte meine Links in 2 verschiedenen Farben gestalten, siehe folgendes Beispiel:

Linküberschrift <--- orange
Etwas Text zum Thema <--- schwarz

der hovereffekt sollte folgendes bewirken:

Linküberschrift <--- grau
Etwas Text zum Thema <--- weiss

Ich trete da nun völlig auf der Stelle, kann mir jemand helfen?

MfG,

cta

[Beat]

Ich möchte meine Links in 2 verschiedenen Farben gestalten, siehe folgendes Beispiel:
Linküberschrift <--- orange
Etwas Text zum Thema <--- schwarz
der hovereffekt sollte folgendes bewirken:
Linküberschrift <--- grau
Etwas Text zum Thema <--- weiss
Ich trete da nun völlig auf der Stelle, kann mir jemand helfen?

Pseudoklassen:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm
Klassen
http://de.selfhtml.org/css/formate/zentrale.htm#klassen

mfg Beat

[Ulysses]

Hi!

Ich trete da nun völlig auf der Stelle, kann mir jemand helfen?

Das a-Element kann auch andere Inline-Elemente enthalten...
FG Ulysses

[Thomas Luethi]

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