nicht angemeldet
Hallo,
hinter einem Html Text Verweis möchte ich ein Rechteck darstellen, welches bei Mouseover die Farbe wechselt.
Jetzt versuche ich gerade das ganze ohne Grafiken und ohne JavaScript nur mit CSS und den Pseudo-Formaten (a:hover...usw.) hinzukriegen. Dabei soll natürlich das Farbrechteck bei Mousover über dem Text wechseln.Mein Ansatz sind erstmal zwei Leerzeichen für das Rechteck. Dann ein anderer Css "Block" Pseudoformate mit wechselnden Backgrounds für die Leerzeichen.
Jetzt steht im Quelltext innerhalb der Verweis Tags der Text und die Leerzeichen. Aber wie kann ich den Leerzeichen die Klasse zuweisen und die "Verbindung" zum Text behalten?
Die beiden Leerzeichen müssen in ein eigenes Element. Hierfür stehen innerhalb eines A-Elements aber nur Inline-Elemente zur Verfügung. Da das Element keinen eigentlichen Auszeichnungssinn hat, bietet sich ein SPAN-Element an.
<a class="spezialLink" href="...">Linktext <span> </span></a>
Im CSS können dann für den Fall des Hoverns des A-Elementes die Eigenschaften des SPAN-Elementes verändert werden.
a.spezialLink {color:#000;}
a.spezialLink span {background-color:blue; border:1px solid black;}
/*Für den IE muss sich hier was ändern, damit das Nachfolgende interpretiert wird.*/
a.spezialLink:hover {color:black;}
a.spezialLink:hover span {background-color:red;}
Die Änderung der Textfarbe von schwarz nach schwarz ;-)) ist notwendig, weil sonst der IE den Selector
a.spezialLink:hover span
ignoriert.
viele Grüße
Axel