problema capas y doctypes

Sonia S · #1 (**permalink**) 23/12/2006, 10:02

hola, me pasa lo siguiente:

Tengo un DIV que me hace de menu, no es un ul o ol, ya que queria hacer rollover con imagenes. Esto ya lo he conseguido, aunque se haya perdido un poco la semantica ya que esta realizado con <a>

Ahora lo que deseo es que al pasar el raton por el primer link de ese menu, se haga visible una capa que a su vez tiene otros elementos como (y aqui si) una lista <ul>

Nada mas sencillo en teoria, se programa el evento onmouseover en el link y el javascript hace visibility:visible, se muestra la capa, funciona bien.

Y luego en esa capa mostrada, para esconderla se programa onmouseout en ella y el manejador hace visibility:hidden, tambien funciona perfectamente.

Pero ... al entrar en los elementos <li> de la lista en esa capa recien mostrada, el evento onmouseout se dispara y me desaparace la capa.

Ya me estoy volviendo loca pq no entiendo lo que sucede. No tiene el div la mayor prioridad sobre los li? pq se esconde la capa que hace de submenu?

Ademas en el modo estricto, que es como me gusta hacer las paginas a mi, es cuando no funciona y si lo hace en modo quirk.

se os ocurre alguna solucion?

Tambien me gustaria hacer eso si es posible sin javascript, pero no se si se puede solo con CSS.

El codigo seria este:

Código HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "...w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns=".../1999/xhtml" xml:lang="es">
<head>

<meta http-equiv="content-type" content="text/html; charset=es-ascii" />
<meta name="author" content="Laia Mestre" />
<meta name="keywords" content="" />
<meta name="description" content="Web de inmobiliaria Trueba S.L." />
<meta name="robots" content="index, follow" />

<title>test de capas y doctypes</title>

<style type="text/css">
#capa1 {
position:absolute;width:100;height:100;top:100;left:100;background-color:blue;
}

#capa2 {
position:absolute;width:100;height:100;top:100;left:200;background-color:red;visibility:hidden;
}

#capa2 p {
color:blue;
}

</style> 

<script type="text/javascript"> 
function mostrar(nombreCapa){ 
document.getElementById(nombreCapa).style.visibility="visible"; 
} 
function ocultar(nombreCapa){ 
document.getElementById(nombreCapa).style.visibility="hidden"; 
} 
</script> 
</head> 
<body> 
<div id="capa1" onmouseover="mostrar('capa2')">Capa 1</div> 
<div id="capa2" onmouseout="ocultar('capa2')">
Capa 2
<p>parrafo uno</p>
</div> 
</body> 
</html>

Como se puede ver, al entrar en la capa2 y seleccionar el parrafo desaparece la capa, y no deberia no?

Bueno, besos feliz navidad!

Mikmoro · #2 (**permalink**) 23/12/2006, 11:20

Hola.
Creo que con la forma que lo has diseñado, simplemente te desaparece la capa dos al salirte de la capa 1, realmente porque tú se lo has pedido. Una forma sencilla de resolverlo es añadir un onmouseover a la capa 2, de manera que cuando estés encima de ella también sea visible:

<div id="capa1" onmouseover="mostrar('capa2')">Capa
1</div>
<div id="capa2" onmouseover="mostrar('capa2')"
onmouseout="ocultar('capa2')">Capa
2
<p>parrafo uno</p>
</div>

Y funciona perfectamente.

Mikel.

Sonia S · #3 (**permalink**) 23/12/2006, 11:31

si! asi es, es lo que deseaba, gracias Mikel