[SOLUCIONADO] problema con hover al pasar por un div y mostrar background

[beryc]

Buenas,
Intento hacer algo que al parecer debe ser sencillo con mi pagina web en html5 y cs3, he tratado de encontrar la solución a mi problema por Internet y no lo encuentro.

quiero que al pasar el raton por un grupo de <div id="div1"> <div id="div2"> <div id="div3"> <div id="div4"> otro <div class="cuadro"> muestre una imagen de fondo (background) relacionada con el div al que le hago el hover.
explicandolo para mas detalle.

al pasar el raton por div1 se muestra en div.cuadro una imagen1 como background
al pasar el raton por div2 se muestra en div.cuadro una imagen2 como background
al pasar el raton por div3 se muestra en div.cuadro una imagen3 como background
al pasar el raton por div4 se muestra en div.cuadro una imagen4 como background
etc etc

en el codigo css he tratado de hacer esto

div#div1 + div.cuadro {
background: url(../imagenes/imagen1);
}

div#div2 + div.cuadro {
background: url(../imagenes/imagen2);
}

div#div3 + div.cuadro {
background: url(../imagenes/imagen3);
}

div#div4 + div.cuadro {
background: url(../imagenes/imagen4);
}

en el codigo html tengo esto

<div id="div1">
<img src="http://www.forosdelweb.com/f53/imagenes/miniimagen1>
</div>
<div id="div2">
<img src="http://www.forosdelweb.com/f53/imagenes/miniimagen2>
</div>
<div id="div3">
<img src="http://www.forosdelweb.com/f53/imagenes/miniimagen3>
</div>
<div id="div4">
<img src="http://www.forosdelweb.com/f53/imagenes/miniimagen4>
</div>

<div class="cuadro">
</div>

obviamente si teneis alguna otra propuesta para hacer esto ya sea en java script o alguna otra cosa que no modifique mucho mi codigo html5, agradeceria me la comentaran.

pd. haciendo este codigo, solo funciona el hover del div4, los otros div es que no muestran nada...

[mbm150]

Hola,

solo funciona con el 4 porque + solo funciona con el elemento siguiente, para que funcione con todos deberías usar ~ en lugar de +.

Código CSS:

div#div1 ~ div.cuadro {
    background: url(../imagenes/imagen1);
}
 

Y así sucesivamente.

Saludos.

[beryc]

Iniciado por mbm150

Hola,

solo funciona con el 4 porque + solo funciona con el elemento siguiente, para que funcione con todos deberías usar ~ en lugar de +.

Código CSS:

div#div1 ~ div.cuadro {
    background: url(../imagenes/imagen1);
}
 

Y así sucesivamente.

Saludos.

muchisimas gracias mbm150, soy nuevo programando en web y no se algunas diferencias entre el + ~ > pero voy aprendiendolas.
me ha servido mucho.
ire publicando mis dudas y espero tener respuestas tan sencillas y buenas como estas....
saludos