[HTML/CSS] Hover-Effekt für Bilder

[Sentenza]

Guten Abend FB-Community,

habe Probleme damit, einen Hover-Effekt für Bilder zu erzeugen.
Mein Versuch war, Link-Tags untergeordnete Div-Container anzulegen und diesen mit CSS einen Hintergrund zuzuweisen. Eine weiterere Formatdefinition (z.B. #home:hover) enthält den Verweis auf den entsprechenden anderen Hintergrund.

#home {
  width:163px;
  height:43px;
  float:left;
  background-image: url(home.jpg);
}

#home:hover {
  background-image: url(home2.jpg);
}

Der Firefox interpretiert dies auch wie gewünscht, der Internet Explorer 6 allerdings bleibt stur.
Wie kann ich es auch ihm recht machen?

Die besagte Seite lässt sich hier aufrufen, die entsprechende CSS-Datei hier.

Ich danke für jeden hilfreichen Hinweis.

Sentenza

 

[krizzelfix]

Hallo Sentenza

Musst mal mit

#home {
  width:163px;
  height:43px;
  float:left;
  background-image: url(home.jpg);
}

#home a:hover {
  background-image: url(home2.jpg);
}

versuchen.

Und die du solltest die Bilder schonmal vorladen damit nicht erst ein weißer Kasten zu sehen ist.

Grüße

tewes

 

[Sentenza]

Hallo tewes,

danke für den Tip.

Damit dein Vorschlag klappt, müsste sich ja noch innerhalb des Div-Containers #home ein Link-Tag befinden. Wie soll das gehen?

Was mich jetzt aber grad noch viel stutziger macht, ist, warum der IE die Buttons nicht vernünftig anordnet?
Die Buttons "Anfahrt" & "Shop" ordnen sich unter den zwei ersten an.

 

[Keita]

Es sollte eher einen stutzig machen, daß der Firefox das ganze wie erhofft rendert
Das Anchor-Element darf ausschließlich Inline-Elemente außer dem Anchor-Element selbst enthalten, die DIV-Elemente innerhalb der Anchor-Elemente sind also syntaktisch falsch.

Daß beim IE 6 überhaupt nichts passiert, liegt schlicht daran, daß nur das Anchor-Element die Pseudo-Klasse :hover kennt, erst mit dem IE 7 kennen auch andere Elemente die Pseudo-Klassen.

greetings, Keita

 

[Sentenza]

Kann man dem Anchor-Element denn Größen zuweisen?

 

[Keita]

Klar, du kannst es mittels der display-Eigenschaft als Blocklevel-Element darstellen lassen und somit auch eine Höhe und Breite zuweisen.
Es ist übrigens auch eine schlechte Idee (quasi) leere Anchor-Elemente anzulegen, wenn du schon Hover-Effekte mittels CSS erzielen willst, solltest du wenigstens ein transparentes Bild als Inhalt des Links einbinden.

greetings, Keita

 

[krizzelfix]

Damit dein Vorschlag klappt, müsste sich ja noch innerhalb des Div-Containers #home ein Link-Tag befinden. Wie soll das gehen?

Da muss doch sowieso ein Link-Tag drin sein damit du die nächste Seite aufrufen kannst

Die Buttons "Anfahrt" & "Shop" ordnen sich unter den zwei ersten an.

Hast du eventuell zwischen den A-Tags Leerzeichen im Quelltext? Wenn ja raus damit...hört sich komsich an aber das kann manchmal der Fehler sein

 

[Sentenza]

OK, Jungs.
Vielen Dank!

 

[Zweipunktnull]

Noch n kleiner Tipp am Rande: Bisschen (mehr) Anti-Aliasing würde deinen Grafiken gut tun