Hei,
Ich möchte, dass wenn man über ein Bild fährt, der :hover Effekt bei einem anderen Div ausgelöst wird.

Sieht in etwa so aus:

HTML-Code:

<img src="bild.jpg" alt="Bild" /><br />
<div class="hover-div">Ein Text...</div>

Code :

1 2 3 4 5 6

.hover-div {     background-color:#fff; } .hover-div:hover {     background-color:#ccc; }

Wenn man nun also über das obere Bild fährt, soll unten beim "hover-div" der Hover Effekt ausgelöst werden. Genauso, wie wenn man direkt über den Div fährt. Ist dies irgendwie möglich?

Gruß

Code css:

1 2 3

img:hover ~ .hover-div {     background:red; }

Oder ohne den Zeilenumbruch dazwischen

Code css:

1 2 3

img:hover + .hover-div {     background:red; }

Edit: Der IE6 bleibt bei beiden Varianten auf der Strecke, was mir inzwischen egal ist.

Danke, funktioniert perfekt. Musste nur noch eine Klasse hinzufügen, da sich mein "hover-div" in einem anderen Div befindet.
also so:

HTML-Code:

<div class="info"><div class="hover-div">Ein Text...</div></div>

dann einfach im CSS-Code die Klasse "info" hinzugefügt:

Code css:

1 2 3

img:hover ~ .info .hover-div {     background:red; }

Vielen Dank, für die einfache Lösung.

Gruß