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