Continuando con el tema y después de haber investigado el tema del :hover, sigo sin hallar la solución, pues por lo que he averiguado un div hijo no puede cambiar una propiedad de un div padre. A modo de ejemplo pongo un texto de otro foro:
Lo que no se puede hacer es seleccionar un ascendiente (ej. un padre). Por lo tanto el siquiente ejemplo ni funciona ni debe hacerlo:
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>
em:hover #div { color: red; }
</style>
<h1>Este ejemplo ni funciona ni debe hacerlo.</h1>
<div id='div'>
<em>Este em</em>
no puede cambiar las propiedades de su padre.
</div>
No obstante he probado lo siguiente a ver si funcionaba: he quitado todo el javascript y he dejado el código como sigue:
Código html:
<body>
<div id="caja1">
<div id="caja2"></div>
</div>
</body>
Css:
#caja1{
position:absolute;
width:1280px;
height:1024px;
background-image:url(../imagenes/uno.jpg);
background-repeat:no-repeat;
}
#caja2{
position:relative;
width:131px;
height:32px;
float:right;
top:412px;
right:308px;
background-image:url(../imagenes/boton1.jpg);
background-repeat:no-repeat
}
#caja2:hover{
position:relative;
width:131px;
height:32px;
float:right;
top:412px;
right:308px;
background-image:url(../imagenes/boton2.jpg);
background-repeat:no-repeat
}
#caja2:hover #caja1 {
background-image:url(../imagenes/dos.jpg);
background-repeat:no-repeat
}
Y efectivamente no funciona, al pasar sobre el botón cambia su estado según el :hover pero el background de caja1 se mantiene igual, no cambia a la imagen dos.
AYUDA!!!