CSS Css Hover mit Bild

[PuITutorials]

Hallo,

Ich möchte eins ganz normales hover verwenden bei dem ein neunes Bild eingesetzt wird! Nur ich irgentwie klappt das nicht

Hier der Code:

#bild-mitte {
margin: 10px 20px 10px 20px;
}
#bild-mitte:hover {
background: url("../bilder/beeindruckend.png")
}

<img id="bild-mitte" src="../bilder/mitte.jpg" alt="mitte">

Gruß

 

[Kausalat]

Solange im HTML-Code eine Grafik als <img>-Element eingebunden ist, wird ein Hintergrundbild nicht angezeigt, da die Grafik dieses natürlich überlappt. Du müsstest für ein Hover-Bildchen beide Grafiken als Hintergrundelement einbinden.

#bild-mitte {
background: url(normal.jpg);
}

#bild-bitte:hover {
background: url(hover.jpg);
}

 

[PuITutorials]

Jetzt habe ich das so:

<div id="bild-mitte"</div>

#bild-mitte {
margin: 10px 20px 10px 20px;
background: url(../bilder/mitte.jpg)
}
#bild-mitte:hover {
margin: 10px 20px 10px 20px;
background: url(../bilder/beeindruckend.png)
}

Und es wird nichts angezeigt !

 

[Kausalat]

— Das "margin" brauchst du nicht im :hover-Status zu wiederholen.
— Es fehlt eine schließende spitze Klammer: <div id="bild-mitte"></div>

 

[mustermen]

hey du hast dein div nicht richtig beendet!

<div id="bild-mitte"</div>

es muss so sein

<div id="bild-mitte"> </div>

und beim CSS bitte immer bei der letzten Regel auch ein Simikolon davor schreiben auch wen man es nicht muss, den wen man darunter eine weitere Regel schreibt wird diese nicht angewandt.

 

[PuITutorials]

Habe alles umgesetzt nur es klappt immernoch nicht

Hier mal die Seite damit ihr den ganzen Code sehen könnt ! Das Bild müsste eigentlich unter dem großen Bild Sein !

http://weltderforen.de/home.html

 

[Tumbleweed]

Gib deinem bild-mitte div mal height und width, dann wird was angezeigt und es hovert auch. Ob es so aussehen soll, weißt nur du.

 

[PuITutorials]

Jep klappt vielen Dank euch allen !