Zur Navigation

background-image wechseln bei Mouse-over?

1 Domenika

Hi, ich bin's mal wieder!

Ich tüfftele an folgendem Problem:

Ich habe ein div mit einem background-image. (Außerdem enthält es noch Text.)
Ich möchte, wenn man mit der Maus drüber geht, dass das div ein andere background-image anzeigt. Ist das überhaupt möglich, oder muss ich das anders angehen?

Danke!

domenika

22.05.2007 17:30

2 Jörg Kruse

Hallo Domenika,

hinsichtlich den moderneren Browsern wie Firefox, Opera und dem IE 7 kannst du für die Pseudoklasse :hover ein anderes Hintergrundbbild definieren

div#blabla:hover {
background-image:url(background-2.gif);
}

Ich nehme an, dies wird auch in Safari funktionieren. Der IE 6 kann mit dem :hover außerhalb von Links allerdings noch nichts anfangen. Falls man diesen Browser bercksichtigen möchte, setzt man das betreffende Element entweder in ein a Element, welches die Background-Eigenwschaft erhält, oder man steuert den Hover-Effekt über ein JavaScript

22.05.2007 18:10

3 Domenika

Hi Jörg

danke für die superschnelle Antwort!
Ja, leider muss ich den IE6 berücksichtigen, aber das ist ja schonmal eine gute Vorschau auf kommende Zeiten, wenn man das div hovern kann :)

Ich habe jetzt das Bild in einem <a>.
Das Bild soll den ganzen Hintergrund meines Hauptdivs ausfüllen.
Dann sind in dem div noch 2 Unterdivs, eines mit Text, eines mit einem Link (der einen Button aufruft).

<hauptdiv>
<a mit Bild>
<div mit text></div>
<div mit Link></div>
</a>
</hauptdiv>

Das Bild im a erscheint als Hintergrundbild im Hauptdiv.
Der Text erscheint auch, auf dem Hintergrundbild liegend.
Aber leider verschiebt der Explorer mir das div mit dem link (den Button) nach unten, unterhalb des a-Bildes.
Kann ich das a irgendwie in den Hintergrund zwingen? Ein z-index wird er wohl nicht nehmen, oder? (Kann das gerade nicht ausprobieren...)

Danke Dir!

Domenika

(Notfalls integriere ich den Button in das Hintergrundbild, aber ich will das erstmal so versuchen :))

22.05.2007 18:31

4 Jörg Kruse

Das Problem ist, dass es sich bei a um ein Inline-Element handelt, welches nicht dafür vorgesehen ist, Blockelemente aufzunehmen :/

Ich würde es mal mit einem Div und JavaScript versuchen:

<div id="haupt">
 <div id="Bild" onmouseover="document.getElementById('Bild').className = 'bg2';">
   <div id="text">TEXT</div>
   <div id="Link">LINK</div>
 </a>
</div>

Für die CSS-Klasse bg2, der bei Hover div#Bild zugeordnet wird, wird dann ein eigener Hintergrund definiert:

.bg2 {
background-image: url(bg2.gif);
}

22.05.2007 19:02 | geändert: 22.05.2007 19:03

5 Domenika

Das klingt gut, danke! Das werd ich dann mal versuchen umzusetzen :)

Schönen Abend!

22.05.2007 19:04

6 rattlesnake

<hauptdiv>
<a mit Bild>
<div mit text></div>
<div mit Link></div>
</a>
</hauptdiv>


CSS:

a mit Bild{
display: block;
}


Somit definierst du das a mit Bild als Blockelement, ob es dann klappt weiß ich leider nicht. Aber du hast ja sonst auch schon eine Lösung. :)

22.05.2007 19:38

7 Jörg Kruse

Das display:block behebt das Problem leider nicht in allen Browsern: Opera hält sich scheint's auch dann noch an den Grundsatz, dass ein Link keine Blockelemente in sich aufnimmt

22.05.2007 20:00 | geändert: 22.05.2007 20:00

8 Lala x3 (Gast)

hab mal ne frage wie kann man selbst so einen farbverlauf hintergrund machen ôo ?
iwie checkii dasz nish o:
wär sehr nett danke :-*

03.07.2007 13:49

... 2 Jahre und 11 Monate später ...

10 JAZZ (Gast)

Hallo Zusammen!
Ich habe folgendes Problem bzw. folgende Idee.
Ich möchte das background-image aus einem anderen <div> tag per OnMouseOver und OnMouseClick ändern.
Die buttons hinfür sind wie gesagt in einem ganz anderen <div> tag, der widerrum auch ein background-image besitzt, welches sich aber nicht ändern darf.
wie mache ich das jetzt am schlausten?

Vielen lieben Dank für eure Anteilnahme :-)

18.06.2010 22:19