✔ a:hover bei Bildern?

[mr_floppy]

Morgen,

ich habe für ein Rating Script 5 Sternchengrafiken die verlinkt sind um etwas zu bewerten. Wenn man mit der Maus über eines der Sternchen fährt soll sich das Bild ändern, damit man sieht wo die Maus genau ist. Dafür habe ich eine CSS Klasse geschrieben die so aussieht:

.ratimg a:hover{
background-image: url(img/star1.gif);
}

Der Link sieht dann so aus:

<a href="#" class="ratimg">Link</a>

Das Bild ändert sich aber nicht. Kann mir einer sagen warum? :suspekt:
Ich habe es auch mit <div class="" probiert das ging aber auch nicht!


MfG

 

[maxi_w]

Hi,
ich hätte das folgendermaßen gelöst:

.ratimg a:hover{
background-image: url(img/star1.gif);
}

<a href="#"><img src="img/star0.gif" class="ratimg"></a>

So wie ich das verstanden habe möchtest du ja die URL von einem Bild ändern. Also müsstest du erstmal eins einbinden.


Gruß

 

[mr_floppy]

Das bild ist drin, ich hab es oben nur abgekürzt.

Das sieht jetzt so aus:

<a href="#"><img src="img/star1.gif" class="ratimg"></a>

Wenn ich mit der Maus über das Bild fahre soll daraus:

<a href="#"><img src="img/star2.gif" class="ratimg"></a>

werden.

 

[maxi_w]

Hm.. ich glaube ich habe auch einen Denkfehler in meinem Lösungsansatz gehabt.
Das sollte gehen:

.ratimg {
background-image: url('star1.gif');
width:15px;
height:15px;
}
.ratimg:hover {
background-image: url('star2.gif');
}


<a href="#"><div class="ratimg"></div></a>

Das <a> könnte man auch weglassen, allerdings zeigt er dann keinen Link-Mauszeiger mehr an. Aber da du das ja als Rating-Script brauchst wirst du sicherlich auch das <a> brauchen.

Gruß

 

[Maik]

Hi,

Dafür habe ich eine CSS Klasse geschrieben die so aussieht:

.ratimg a:hover{
background-image: url(img/star1.gif);
}

Der Link sieht dann so aus:

<a href="#" class="ratimg">Link</a>

Das Bild ändert sich aber nicht. Kann mir einer sagen warum?

der Selektor muß demnach so lauten:

a.ratimg {
	background-image: url(img/star.gif);
}

a.ratimg:hover {
	background-image: url(img/star1.gif);
}

<a href="#" class="ratimg">Link</a>

Siehe hierzu auch mein CSS-Tutorial CSS-Rollover.

@maxi_w: Inline-Elemente (= a) dürfen keine Block-Elemente (= div) enthalten.

mfg Maik

 

[mr_floppy]

Hi,

Danke das Tutorial war mir eine Hilfe. Ich hatte im <a> Tag schon ein Bild mit <img> festgelegt und konnte das mit CSS nicht mehr ändern.

Falsch:
<a href="#" class="ratimg"><img src="img/star1.gif"></a>

Richtig:
<a href="#" class="ratimg">Link</a>

*erledigt*


MfG