✔ Hover Element ansprechen

[dsNDesign]

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:

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

.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ß

 

[CPoly]

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

Oder ohne den Zeilenumbruch dazwischen

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

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

 

[dsNDesign]

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

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

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

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

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

Gruß