Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Divs desplegables al poner el mouse encima

Estas en el tema de Divs desplegables al poner el mouse encima en el foro de CSS en Foros del Web. Buenos días, Quiero dividir la pantalla en 4 divs verticales, 25% cada uno. Al poner el mouse encima de cualquiera de ellos, el div se ...
  #1 (permalink)  
Antiguo 09/01/2013, 05:22
 
Fecha de Ingreso: febrero-2008
Mensajes: 76
Antigüedad: 11 años, 10 meses
Puntos: 0
Divs desplegables al poner el mouse encima

Buenos días,

Quiero dividir la pantalla en 4 divs verticales, 25% cada uno. Al poner el mouse encima de cualquiera de ellos, el div se amplía (con un efecto) hasta ocupar el 100% de la pantalla.

¿Es esto posible? Muchas gracias! :)
  #2 (permalink)  
Antiguo 09/01/2013, 06:05
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 4 meses
Puntos: 2111
Respuesta: Divs desplegables al poner el mouse encima

Se puede hacer.

Suponiendo que tengas una estructura parecida a esta:
Código HTML:
Ver original
  1.   <div></div>
  2.   <div></div>
  3.   <div></div>
  4.   <div></div>

Debe de haber un contenedor —section en este caso, aunque podría hacerse con body también— para poder poner las demás capas no seleccionadas a cero altura, ya que el selector de hermanos + es siempre descendiente. Luego para animarlo con transition como es habitual.

Código CSS:
Ver original
  1. div {
  2.   height: 25%;
  3.   transition: height .5s;
  4. }
  5.  
  6. section:hover div {
  7.   height: 0;
  8.   overflow: hidden;
  9. }
  10.  
  11. section:hover div:hover {
  12.   height: 100%;
  13. }

Subí un ejemplo funcional a jsbin.
  #3 (permalink)  
Antiguo 09/01/2013, 14:56
 
Fecha de Ingreso: febrero-2008
Mensajes: 76
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: Divs desplegables al poner el mouse encima

Muchísimas gracias por tu respuesta Bonez! (y gracias por el ejemplo funcional)

Es exactamente lo que necesitaba! Saludos :)

Etiquetas: desplegables, divs, encima, mouse
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 21:52.