Foros del Web » Creando para Internet » CSS »

Hover con efectos múltiples ??

Estas en el tema de Hover con efectos múltiples ?? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/11/2011, 10:20
 
Fecha de Ingreso: noviembre-2011
Mensajes: 5
Antigüedad: 11 años
Puntos: 0
Pregunta Hover con efectos múltiples ??

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

  #2 (permalink)  
Antiguo 14/11/2011, 11:03
 
Fecha de Ingreso: mayo-2010
Mensajes: 65
Antigüedad: 12 años, 7 meses
Puntos: 5
Respuesta: Hover con efectos múltiples ??

Has probado de poner una clase especial a la 1a y a la 3a? y hacer un :hover de la clase?
__________________
perfumes de imitacion
  #3 (permalink)  
Antiguo 14/11/2011, 17:27
 
Fecha de Ingreso: noviembre-2011
Mensajes: 5
Antigüedad: 11 años
Puntos: 0
Respuesta: Hover con efectos múltiples ??

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.
  #4 (permalink)  
Antiguo 14/11/2011, 17:57
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 14 años, 5 meses
Puntos: 1011
Respuesta: Hover con efectos múltiples ??

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 :)
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 14/11/2011 a las 18:17
  #5 (permalink)  
Antiguo 15/11/2011, 09:29
 
Fecha de Ingreso: noviembre-2011
Mensajes: 5
Antigüedad: 11 años
Puntos: 0
Respuesta: Hover con efectos múltiples ??

Cita:
Iniciado por IsaBelM Ver Mensaje
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.
  #6 (permalink)  
Antiguo 15/11/2011, 15:29
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 14 años, 5 meses
Puntos: 1011
Respuesta: Hover con efectos múltiples ??

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>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #7 (permalink)  
Antiguo 15/11/2011, 16:02
 
Fecha de Ingreso: noviembre-2011
Mensajes: 5
Antigüedad: 11 años
Puntos: 0
Respuesta: Hover con efectos múltiples ??

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.
  #8 (permalink)  
Antiguo 16/11/2011, 08:51
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 14 años, 5 meses
Puntos: 1011
Respuesta: Hover con efectos múltiples ??

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>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #9 (permalink)  
Antiguo 21/11/2011, 08:53
 
Fecha de Ingreso: noviembre-2011
Mensajes: 5
Antigüedad: 11 años
Puntos: 0
Respuesta: Hover con efectos múltiples ??

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.


Etiquetas: efectos, hover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:08.