la verdad no se si estoy comprendiendo bien el tema, lo he releido ya varias veces. segun entiendo, el problema es que cuando pasas el raton sobre un enlace, para que aparezca la capa deseada, la capa anterior no te deja presionar sobre los enlaces de la nueva capa. segun tu, porque la capa anterior esta
invisble pero sobre la nueva capa. lamento que sean bien cutre, a continuacion dos ejemplos uno utilizando el zIndex y el otro solo utilizando el display. pues como ya habia mencionado, supone que con display no tengas problema. en cualquiera de los dos ejemplos puedo presionar sobre los enlaces sin conflicto con otro DIV.
version zIndex:
Código:
<html><head><style type="text/css">
div#container{
position:relative;
border:1px solid black;
float:left;
width:200px;
}
div#container div{
position:absolute;
background:#999;
padding:2em;
border:1px solid blue;
}
</style>
<script type="text/javascript">
zlevel = 1;
function cerrar(id){
// realmente esta funcion no la necesitabas en esta version;
// document.getElementById(id).style.display="none";
}
function abre(id){
document.getElementById(id).style.zIndex = zlevel++;
}
function cerrartd(){
cerrar('div1');
cerrar('div2');
cerrar('div3');
}
</script></head>
<body>
<div id="container">
<div id="div1">
<a href="1">img1</a> <a href="2">img2</a>
</div>
<div id="div2">
<a href="3">img3</a> <a href="4">img4</a>
</div>
<div id="div3">
<a href="5">img5</a> <a href="6">img6</a>
</div></div>
<a href="#" onmouseover="cerrartd(); abre('div1');">a</a>
<a href="#" onmouseover="cerrartd(); abre('div2');">b</a>
<a href="#" onmouseover="cerrartd(); abre('div3');">c</a>
</body></html>
version display, solo tienes que cambiar las funciones correspondientes del script:
Código:
function cerrar(id){
document.getElementById(id).style.display="none";
}
function abre(id){
document.getElementById(id).style.display="block";
}