OnMouseOut: El eterno problema

[lalcey]

Buenas a todos!.

Vereis, tengo un problemilla, que ya he visto varias veces, incluido por este foro, pero ninguna respuesta me ayuda.

El problema es simple:

<ul>
<li><a href="#">Informacion</a>
<ul>
<li><a href="#">De la Web</a><li>
<li><a href="#">Del foro</a><li>
<li><a href="#">Acerca de</a><li>
</ul>
</li>
</ul>

Bien, como podeis observar, dentro de una etiqueta <li> tengo otra <ul> con sus respectivas etiquetas.

El caso es que en la etiqueta <li> principal (esta en rojo), tengo un evento OnMouseOver y otro OnMouseOut.

Cuando pongo el raton sobre <li>, se despliega con efecto y tal la etiqueta ul (es un menu desplegable).

Pero cuando posiciono el raton sobre cualquiera de las siguientes etiquetas, a pesar de estar dentro del <li> principal, me lo toma como OnMouseOut y me cierra el menu.

¿Que solucion puedo darle a esto?

¿Quizas tendria que comprobar si es hijo de tal o de cual?¿Como?

Salu2 y gracias!!

[Panino5001]

Iniciado por lalcey

¿Quizas tendria que comprobar si es hijo de tal o de cual?¿Como?

Exacto. Fijate en este enlace, en el cual se explica el problema y se muestra cómo solucionarlo: http://kusor.net/traducciones/brainj...vents5.es.html

[zerokilled]

a ver si este tema te ayuda, http://www.forosdelweb.com/f13/onmou...e-loco-732519/. aunque en este caso habla sobre DIV y SPAN, sigue siendo valido para tu caso.

edit @ 9:26,
ehh se me adelantaron, pero igual dejo el mensaje por si te ayuda...

@Panino, saludos

[lalcey]

Muchas gracias a los dos!.

Panino5001, interesantisimo el articulo, he aprendido bastante leyendolo, pero no consigo aplicarlo a la forma en que hago esto.

He sacado un ejemplo de como lo hago, para ponerlo por aqui:

Código javascript:

Elemento = function(id,altura){
  var thislocal = this;
  var Tmp, Tmp2;
 
  this.id = id;
  this.altura=altura;
 
  document.getElementById(id).onmouseover= function(){thislocal.Desplegar()};
  document.getElementById(id).onmouseout= function(){thislocal.Plegar()};
}
 
Elemento.prototype.Desplegar = function(){
  var obj = document.getElementById(this.id);
  var thislocal= this;
 
  if (this.altura<195){
    this.altura+=10;
    this.Tmp=setInterval(function(){thislocal.Desplegar()},25);
  }else{
    clearInterval(this.Tmp)
  }
  
   obj.style.height=this.altura;
}
 
Elemento.prototype.Plegar = function(){
  var obj = document.getElementById(this.id);
  var thislocal= this;
  
  if (this.altura>30){
    this.altura-=10;
    this.Tmp2=setInterval(function(){thislocal.Plegar()},25);
  }else{
    clearInterval(this.Tmp2)
  }
  
   obj.style.height=this.altura;
}
 
var E = new Elemento('DSubMenu',30);
 

Y el codigo HTML:

Código html:

<div id="DPrincipal" style="overflow:hidden;height:200px;width:150px;">
  <div id="DSubMenu" style="overflow:hidden;height:30px;width:135px;border: 1px solid;">
    <center>Info</center>
    <br><br>
    <a href="#">Informacion1</a><br>
    <a href="#">Informacion2</a><br>
    <a href="#">Informacion3</a><br>
    <a href="#">Informacion4</a>
  </div>
</div>
 

(Esto es un simple ejemplo de la forma que utilizo para hacer esto).

El problema esta, a la hora de meter las funciones Desplegar() y Plegar(), si lo hago sin estas funciones, haciendo que el efecto sea directo, no tengo estos problemas.

¿Alguna forma de interpretarlo?

Salu2!