problemas con :hover

#1 (**permalink**) 01/01/2011, 10:01

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.

mariomon17 · #2 (**permalink**) 01/01/2011, 10:58

Como bien te dijeron en el otro foro, no se puede modificar con :hover las propiedades de otro elemento que no es el seleccionado.

Creo que lo mejor seria hacerlo con javascript.

Código HTML:

Ver original<div onclick="document.getElementById('imagen').background='...' >
<div id="imagen" >

Entiendes? Un saludo!

kseso? · #3 (**permalink**) 01/01/2011, 11:35

Cita:

Iniciado por mariomon17

Como bien te dijeron en el otro foro, no se puede modificar con :hover las propiedades de otro elemento que no es el seleccionado.

Creo que lo mejor seria hacerlo con javascript.

Código HTML:

Ver original<div onclick="document.getElementById('imagen').background='...' >
<div id="imagen" >

Entiendes? Un saludo!

Pues no lo entiendo, no. Porque en el segundo ejemplo:

Código HTML:

Ver original<body>
<div id="caja1">
<div id="caja2"></div>
</div>
</body>

dijese quien lo dijese que no se puede, miente tanto como quien lo repite.

Css define ademas de los selectores descendientes, los adyacentes, hermanos... sin entrar en los pseudoselectores y los definidos por la especificación 3 de css (nº de elemento, tipo de elemento...). Y ahí está claro que no se trata de modificar un ascendente, sino de hermanos y adyacentes.

Y ya que estamos, en un foro de css dar una respuesta basada en el desconocimiento y en js queda como feo, por lo menos.

prozaius:
http://www.forosdelweb.com/f53/rollo...4/#post3553145

mariomon17 · #4 (**permalink**) 01/01/2011, 11:54

EH! Entonces porque todos los libros y manuales se empeñan en enseñanos lo contrario!

Atonito me he quedado.

Muchas Gracias, y perdon por mi desconocimiento.

kseso? · #5 (**permalink**) 01/01/2011, 12:18

Cita:

Iniciado por mariomon17

EH! Entonces porque todos los libros y manuales se empeñan en enseñanos lo contrario!

Atonito me he quedado.

Muchas Gracias, y perdon por mi desconocimiento.

Mariomón:
Supongo que los manuales a los que se refiere, indicarán la imposibilidad de css para actuar sobre los ancestros (padre, abuelos...). Si no fuese así, tírelos a la papelera.
Aquí un artículo interesante al respecto:
Why we don't have a parent selector [ing] por Jonathan Snook, @snookca

Sobre lo que yo le he rectificado es sobre la posibilidad que sí da css de actuar sobre elementos que están a la misma "altura" (adyacentes, hermanos) y sobre los descendientes de éstos últimos.
Basta con usar el selector apropiado a cada caso:

Código CSS:

Ver originalelemento + elemento {}
elemento ~ elemento {}
/*y sus derivados*/
elemento hijo:hover + elemento hijo {}
elemento hijo:active ~ elemento hijo {}

mariomon17 · #6 (**permalink**) 01/01/2011, 12:40

Muchas gracias!
Corro a informarme :D

#7 (**permalink**) 01/01/2011, 12:45

Cita:

Iniciado por kseso?

Mariomón:
Supongo que los manuales a los que se refiere, indicarán la imposibilidad de css para actuar sobre los ancestros (padre, abuelos...). Si no fuese así, tírelos a la papelera.
Aquí un artículo interesante al respecto:
[URL="http://snook.ca/archives/html_and_css/css-parent-selectors"]Why we don't have a parent selector[/URL] [ing] por Jonathan Snook, [URL="http://twitter.com/snookca"]@snookca[/URL]

Sobre lo que yo le he rectificado es sobre la posibilidad que sí da css de actuar sobre elementos que están a la misma "altura" (adyacentes, hermanos) y sobre los descendientes de éstos últimos.
Basta con usar el selector apropiado a cada caso:

Código CSS:

Ver originalelemento + elemento {}
elemento ~ elemento {}
/*y sus derivados*/
elemento hijo:hover + elemento hijo {}
elemento hijo:active ~ elemento hijo {}

Muchas gracias por vuestras respuestas y en especial a kseso por indicarme el camino. Sin embargo, y dado que no tengo muchos conocimientos en css, no consigo resolver el problema, a pesar de que he accedido a los enlaces facilitados por kseso y realizadas varias pruebas. Entiendo que tal y como tengo el código caja1 es padre de caja2 y debería cambiar algo para que fuesen hermanos o adyacentes, ¿no es así? pero sinceramente no sé como hacerlo. Agradecería alguna ayudita extra. Saludos

mariomon17 · #8 (**permalink**) 01/01/2011, 15:29

Tengo una duda, la expongo auqui o si quereis creo un nuevo tema pero creo que la solucion te vendra bien cuando los hagas hermanos (cosa que tampoco tengo muy clara que es).

Tengo dos div's.

Código HTML:

Ver original<div class="uno">UNO</div>
<div class="dos">DOS</div>

Y el codigo CSS es este:

Código CSS:

Ver original.uno {background:#0FF;
}
 
.dos {background:#FF9
}
 
.dos:hover .uno {background:#66F
}

Al final que esta mal, no se como hacerlo. Quiero que al pasar por encima de .dos, .uno se cambie el color de fondo.

#9 (**permalink**) 02/01/2011, 09:30

Cita:

Iniciado por mariomon17

Tengo una duda, la expongo auqui o si quereis creo un nuevo tema pero creo que la solucion te vendra bien cuando los hagas hermanos (cosa que tampoco tengo muy clara que es).

Tengo dos div's.

Código HTML:

Ver original<div class="uno">UNO</div>
<div class="dos">DOS</div>

Y el codigo CSS es este:

Código CSS:

Ver original.uno {background:#0FF;
}
 
.dos {background:#FF9
}
 
.dos:hover .uno {background:#66F
}

Al final que esta mal, no se como hacerlo. Quiero que al pasar por encima de .dos, .uno se cambie el color de fondo.

He de reconocer que gracias a kseso y a mi obstinación estoy aprendiendo un poco más sobre css. He encontrado una solución a lo que propones, aunque haciendo un truquito para que se pueda cumplir la norma de selectores adyacentes, intercambiando las posiciones de los div uno y dos. Funcionar funciona, aunque no sé si habrá alguna manera más elegante.

<html>
<head>
<style type="text/css">
.uno {
background:#FF9;
display:block;
position:absolute;
top:20px;
width:600px
}

.dos {background:#0FF;
display:block;
position:absolute;
width:600px;
top:0px

}

.uno:hover + .dos {background:#66F
}
</style>
</head>

<body>
<div class="uno">DOS</div>
<div class="dos">UNO</div>
</body>
</html>

Saludos.

mariomon17 · #10 (**permalink**) 02/01/2011, 09:46

Si, al final de investigar un poco lo consegui (encima no tengo internet "estable") pero eso es un selector para adyacentes, ¿cual es el selector para hermanos?

#11 (**permalink**) 02/01/2011, 09:58

Cita:

Iniciado por mariomon17

Si, al final de investigar un poco lo consegui (encima no tengo internet "estable") pero eso es un selector para adyacentes, ¿cual es el selector para hermanos?

Hermano o adyacente es lo mismo

mariomon17 · #12 (**permalink**) 02/01/2011, 10:11

Cita:

Iniciado por prozaius

Hermano o adyacente es lo mismo

Pero algo no puede ser hermano y no necesariamente adyacente, verdad?

Por ejemplo:

Código HTML:

Ver original<div class="uno"></div>
<div class="dos"></div>
 
<div class="cinetnido">
   <img><p><p>
</div>
 
<div class="tres"></div>

Aqui dos es adyacente de uno, pero tres no es adyacente y si hermano, o estoy equivocado?

Aqui como se podria hacer para cambiar alguna propiedad de tres. al pasar sobre .uno

Gracias!

#13 (**permalink**) 02/01/2011, 12:46

Cita:

Iniciado por mariomon17

Pero algo no puede ser hermano y no necesariamente adyacente, verdad?

Por ejemplo:

Código HTML:

Ver original<div class="uno"></div>
<div class="dos"></div>
 
<div class="cinetnido">
  <img><p><p>
</div> 
 
<div class="tres"></div>

Aqui dos es adyacente de uno, pero tres no es adyacente y si hermano, o estoy equivocado?

Aqui como se podria hacer para cambiar alguna propiedad de tres. al pasar sobre .uno

Gracias!

En tu ejemplo los div uno,dos,cinetnido y tres son todos adyacentes (o hermanos). Para hacer lo que quieres te pongo un ejemplo:

Código HTML:

<html>
<head>
<style type="text/css">
.uno {background:#0FF;
}
 
.dos {background:#FF9
}

.cinetnido {background:#DDD
}

.tres {background:#CC6
}

.uno:hover + .dos + .cinetnido + .tres {background:#66F}

</style>
</head>

<body>
<div class="uno">UNO</div>
<div class="dos">DOS</div>
<div class="cinetnido">
   <img><p><p>
</div>
<div class="tres">TRES</div>
</body>
</html>

Lo he probado en cuatro navegadores y curiosamente no me funciona en chrome, pero si en explorer, firefox y opera. ¿Alguien sabe por qué?

No obstante te recomiendo la web de consulta que a su vez nos indicó kseso, donde puedes aclarar muchos conceptos: http://www.librosweb.es/

Un saludo.

kseso? · #14 (**permalink**) 02/01/2011, 12:57

Cuando hablaba de hermanos y adyacentes quería hacer distinción, como bien ha dicho alguien, a elementos que estando dentro del mismo contenedor (y a la misma "altura") pueden ser o no consecutivos.

> selector de descendiente, con independencia de la profundidad
body > p {}
Con algunas particularidades respecto al de elemento contenido:
body p {}

selector de hermanos adyacentes (en el html no debe haber otras etiquetas entre ellos)
p + p

selector de hermanos (en el html pueden intercalarse otras entre ellos)
p ~ p

Normalmente se utilizan este tipo de selectores sin hacer referencia a la clase (o id) que se le asignen.
El ejemplo más típico es el relativo a dejar sangrías en los párrafos, con independencia de otras propiedades y de las clases diferentes con las que las apliquemos.

Un caso concreto es cómo aplicar una sangría a todos los párrafos menos al primero, con total independencia de otros aspectos.

Código CSS:

Ver originalp {text-indent: 0;}
p ~ p {text-indent: 3em;}

Si usamos el selector de hermano adyacente (+), podríamos encontrarnos con que entre dos /p/ se intercalase otra etiqueta (una imagen por ejemplo), con lo que el párrafo siguiente a la imagen no tendría la sangría.

mariomon17:
en su caso sería:

Código CSS:

Ver original.uno:hover ~ div.tres {propiedades}

si es que sólo aplicará la clase tres a cajas.
Si quiere afectar a cualquier elemento hermano de "uno" al que le declare la clase "tres"

Código CSS:

Ver original.uno:hover ~ .tres {propiedades}

Espero haber sido capaz de explicarme.

mariomon17 · #15 (**permalink**) 02/01/2011, 15:40

Si, ya lo entendi. Muchisimas gracias, llevaba mucho tiempo en CSS y no conocia esas "propiedades", (ahora me creo tonto por no saberlas).
Muchas gracias, un saludo!