Hola amigos,
Tengo una página con una sola imagen 800x600 (uno.jpg) en un div y superpuesto sobre ella un botón en otro div. Al situarnos sobre el botón cambia la imagen (dos.jpg) así como el botón (:hover) y al retirarnos vuelve a la situación inicial.
Después de haber investigado algo 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:
Código html:
<body>
<div id="caja1">
<div id="caja2"></div>
</div>
</body>
Css:
#caja1{
position:absolute;
width:800px;
height:600px;
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 (boton2.jpg) según el :hover pero el background de caja1 se mantiene igual, no cambia a la imagen dos.
A ver si alguien sabe como arreglarlo.
Muchas gracias por adelantado.