Foros del Web » Creando para Internet » CSS »

Capas visibles e invisibles

Estas en el tema de Capas visibles e invisibles en el foro de CSS en Foros del Web. Hola, me gustaría saber si existe algún método de visibilizar una capa sobre otra, de modo que la cubra totalmente, y sin recurrir a eventos ...
  #1 (permalink)  
Antiguo 10/12/2007, 11:54
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Capas visibles e invisibles

Hola, me gustaría saber si existe algún método de visibilizar una capa sobre otra, de modo que la cubra totalmente, y sin recurrir a eventos javascript (esto es, con CSS puro).

Un saludo.
  #2 (permalink)  
Antiguo 10/12/2007, 14:18
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Re: Capas visibles e invisibles

podrías probar con :hover... algo así como
Código:
#div1 #div2{display:none}
#div1:hover #div2{display:block}
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 11/12/2007, 05:01
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Capas visibles e invisibles

Gracias, Webosiris, voy a probarlo y ya postearé el resultado.

Un saludo.
  #4 (permalink)  
Antiguo 12/12/2007, 12:31
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Capas visibles e invisibles

Lástima, lo he probado y no va. Intenté hacerlo también jugando con el overlaping y tampoco salió bien la cosa. El efecto que busco es que una capa invisible dispuesta sobre otra visible (ambas de idénticas dimensiones) se visibilice al pulsar un punto determinado de ella. ¿Cómo planteo el código? ¿Necesito un botón, como en un evento JavaScript? ¿Las dos capas deben posicionarse de modo absoluto o relativo? Vaya, que estoy hecho un lío...
  #5 (permalink)  
Antiguo 12/12/2007, 13:08
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Re: Capas visibles e invisibles

Ekbrilo, si funciona lo que digo...
te pongo un ejemplo (claro que no va a funcionar en ie6 ya que no soporta :hover en elementos diferentes a enlaces, pero se puede arreglar con un js)

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> 
<head>
<title>Capas visibles e invisibles</title>
<style type="text/css">
#capa1,
#capa2{width:200px;height:200px;}
#capa1{background:#FCDE66}
#capa2{color:#fff;background:#000}
#capa1 #capa2{display:none}
#capa1:hover #capa2{display:block}
</style>
</head>
<body>
<div id="capa1">
<div id="capa2">hola mundo</div>
</div>
</body>
</html> 
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #6 (permalink)  
Antiguo 13/12/2007, 11:28
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Capas visibles e invisibles

Pues nada, probaré de nuevo a ver... (¿será cosa del dichoso Doctype?).
  #7 (permalink)  
Antiguo 14/12/2007, 04:21
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Capas visibles e invisibles

Muchas veces algunos estilo no funcionan con un doctype transicional y si con un estricto o viceversa.

Asegurate de que sea el mismo que en el ejemplo de Webosiris
  #8 (permalink)  
Antiguo 14/12/2007, 05:12
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Capas visibles e invisibles

De acuerdo, Eourus, la verdad es que suelo hacerme un lío con esto de los Doctype. Si se usa html en vez de xhtml, ¿hay algún Doctype más recomendable que otros?
  #9 (permalink)  
Antiguo 14/12/2007, 05:22
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Capas visibles e invisibles

Bueno yo uso este ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  #10 (permalink)  
Antiguo 14/12/2007, 12:44
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Capas visibles e invisibles

Tomo nota, Ourus.
  #11 (permalink)  
Antiguo 18/12/2007, 12:24
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Capas visibles e invisibles

Gracias por el código, webosiris, funciona perfectamente en Firefox. He mirado el enlace que incluyes para el IE6, pero no me aclaro muy bien. ¿Cuál es el script necesario para el caso del ejemplo tan acertadamente propuesto?
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 20:15.