Hover con efectos múltiples ??

averr · #1 (**permalink**) 14/11/2011, 10:20

Me gustaría saber si es posible mediante CSS que el Hover de un elemento ejerza sus efectos sobre otros elementos. La idea es que al situar el ratón sobre una celda, cambie su imagen de fondo, pero también la imagen de fondo de otra celda. En la siguiente imagen intento ilustrarlo. Este ejemplo representa una tabla de 3 celdas. Lo que quisiera hacer es que al poner el ratón sobre la celda superior, tanto esta, como la de abajo cambien su imagen de fondo. Lo mismo debería ocurrir al situar el ratón en la celda inferior, que cambien su imagen de fondo y la de la celda superior.

¿Puede hacerse sin recurrir a Javascript o jQuery?

Gracias

edwardd89 · #2 (**permalink**) 14/11/2011, 11:03

Has probado de poner una clase especial a la 1a y a la 3a? y hacer un :hover de la clase?

averr · #3 (**permalink**) 14/11/2011, 17:27

Con los conocimientos que tengo, esa opción me parece que no es válida. Porque las celdas 1 y 3 tienen distintas imágenes de fondo y, según creo, lo que tú me indicas haría que los fondos de ambas celdas cambiasen con el :hover a la misma imágen.

Saludos.

IsaBelM · #4 (**permalink**) 14/11/2011, 17:57

prueba este ejemplo a ver si te es válido para lo que pretendes

Cita:

#superior {
color: yellow;
}

#inferior {
color: green;
}

#cont:hover > div#superior {
color: red;
}

#cont:hover > div#inferior {
color: blue;
}

<div id="cont">
<div id="superior">contenido de superior</div><div id="otro">contenido de otro</div><div id="inferior">contenido de inferior</div>
</div>

edito: al cambiar las id para darte el código, se me olvido cambiar alguna id :)

averr · #5 (**permalink**) 15/11/2011, 09:29

Cita:

Iniciado por IsaBelM

edito: al cambiar las id para darte el código, se me olvido cambiar alguna id :)

Al principio no, pero con las corrección sí que me funciona.

Es justo lo que necesito. Lo que pasa es que en principio yo pretendía hacerlo con una tabla. Lo que no sé es si esto puedo aplicarlo a las celdas de la tabla. En caso contrario no tengo problema en sustituir la tabla por DIV.

Lo que me has indicado está basado en "selectores"? es para buscar más información sobre este tema.

Gracias por la información.

IsaBelM · #6 (**permalink**) 15/11/2011, 15:29

un buen tutorial

con tabla vendría a ser lo mismo

Cita:

#superior {
color: yellow;
}

#inferior {
color: green;
}

table:hover tr > td#superior {
color: red;
}

table:hover tr > td#inferior {
color: blue;
}

<table>
<tr>
<td id="superior">contenido de superior</td>
</tr>
<tr>
<td id="otro">contenido de otro</td>
</tr>
<tr>
<td id="inferior">contenido de inferior</td>
</tr>
</table>

averr · #7 (**permalink**) 15/11/2011, 16:02

Había intentado adaptarlo a tablas pero no conseguía buenos resultados. Con lo que ahora aportas sí que funciona.

Pero me acabo de dar cuenta de que al colocar el ratón sobre la celda intermedia también cambia el color de la superior e inferior. Quizás no me expliqué bien al principio. Lo que pretendo es que al colocar el ratón sobre la celda superior o inferior el :hover afecte a estas dos a la vez, pero que al colocar el ratón sobre la central, el :hover sólo afecte a esta. Si ves el pequeño gráfico que puse al principio, es como si la celda 1 y 3 formasen un único bloque y la 2 es otro bloque superpuesto.

Para esto que propongo quizás sea mejor optar por hacer el diseño con <DIV> en vez de que con tablas.

Buscando información sóbre soluciones a este tema, curiosamente llegué al tutorial que me indicas. ¿La técnica usada en tus recomendaciones está basada en selectores? Es para indagar más sobre ellos.

Gracias.

IsaBelM · #8 (**permalink**) 16/11/2011, 08:51

primero respondo a tu pregunta. sí, en este caso se usa selecto de hijos

releyendo tu exposición anterior, fui yo la que no supe ver que intrínsecamente se daba por hecho

prueba ahora. si hay algo que no entiendas, por aquí estaremos

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}

#cont {
border: 1px solid red;
width: 200px;
height: 550px; /* alto del contenedor principal. suma de los 3 height de (#img_superior, #img_inferior, #centro_vacio) */
}

#img_superior {
width: 200px;
height: 200px;
background: yellow;
}

#img_inferior {
width: 200px;
height: 200px;
background: green;
}

#centro_vacio { /* crea el espacio donde #centro_relativo_img_centro será colocado */
width: 200px;
height: 150px; /* este alto ha de ser igual que el alto de #centro_relativo_img_centro */
background: pink;
}

#centro_relativo_img_centro {
position: relative;
top: -350px; /* suma de los height de (#img_inferior y #centro_relativo_img_centro). ha de ser negativo */
width: 200px;
height: 150px;
background: black;
z-index: 999; /* superposición */
}

#cont_imagenes:hover > div#img_superior {
background: red;
}

#cont_imagenes:hover > div#img_inferior {
background: blue;
}
</style>
</head>
<body>

<div id="cont">

<div id="cont_imagenes">
<div id="img_superior">contenido de superior</div><div id="centro_vacio">contenido crea espacio</div><div id="img_inferior">contenido de inferior</div>
</div>

<div id="centro_relativo_img_centro">contenido de centro</div>

</div>

</body>
</html>

averr · #9 (**permalink**) 21/11/2011, 08:53

Hola.

A raiz del último mensaje se me ocurrió que quizás no fuese necesario recurrir a selectores para conseguir mi objetivo. En el úlitmo ejemplo encontré la manera de hacerlo mediante DIV, con posicionamiento relativo. Aunque no estoy seguro de haber usado la mejor técnica, ya que para posicionar algunos DIV en el lugar deseado he tenido que usar TOP hasta de "-5400px", y no sé si esto es recomendable.

Aún así, agradezco la ayuda recibida. Me ha servido para descubrir la funcionalidad de los selectores.

He esperado unos días para responder hasta que he montado lo que estaba buscando. El resultado es el siguiente. He rotulado algunos de los DIV´s superpuestos para ilustrar cómo he conseguido el objetivo.

En realidad, el método utilizado ya no corresponde con el título de este hilo.