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.
10/12/2007, 11:54
| |||
| |||
| 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. |
|
10/12/2007, 14:18
| ||||
| ||||
| 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. - |
|
12/12/2007, 12:31
| |||
| |||
| 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... |
|
12/12/2007, 13:08
| ||||
| ||||
| 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. - |
|
14/12/2007, 04:21
| |||
| |||
| 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 |
|
14/12/2007, 05:12
| |||
| |||
| 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? |
|
14/12/2007, 05:22
| |||
| |||
| 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"> |
|
18/12/2007, 12:24
| |||
| |||
| 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? |
