Ver Mensaje Individual
  #11 (permalink)  
Antiguo 07/12/2010, 16:25
enrique4480
 
Fecha de Ingreso: diciembre-2010
Ubicación: valencia
Mensajes: 203
Antigüedad: 14 años
Puntos: 11
Respuesta: Problemas con onMouseOut

Cita:
Cuando muevo el mose fuera del div "menu" se esconde (logicamente), pero tambien se esconde cuando muevo el mouse dentro de los 2 divs que estan dentro del div Menu y eso no quiero que ocurra, perdon si no te entiendo pero es que soy nuevo en javascripy y me lio un poco con todo esto. Saludos y gracias!!
solo tienes que poner en practica el ejemplo, creas 2 divs con id "uno" y otro con id "dos". el div uno contendra al div2 que simula ser una de tus opciones, observa el resultado.


si sales de tu div uno entrando a div dos (una opcion del menu) no se esconde, si sales fuera del div menu completamente te mostrara el alert, que es exactamente lo que quieres, detectar cuando se a salido y no cuando se

if (e.srcElement=="uno) // si el elemento es el div uno (el que contiene las opciones)

if (!e.toElement.id) //negacion, si no tiene id se a salido completamente.

otro ejemplo valido:

if(e.toElement.className!="className de las opciones)

en ese ultimo ejemplo hay que verificar tb que toElement no sea el propio menu, si no es el menu y tampoco las opciones por logica estas fuera.

te pongo un ejemplo entero para que veas que solo te da el alert al salir del div totalmente y no cuando te pones encima del otro.

Código HTML:
Ver original
  1.  
  2. function pp(e)
  3. {
  4.  if (e.srcElement.className=="uno")
  5.  {
  6.   if(!e.toElement.className)
  7.   {
  8.    alert("sales del div completamente ");
  9.   }
  10.  }
  11. }
  12.  
  13. window.addEventListener("mouseout",pp,false);
  14. .uno
  15. {
  16.  background-color: blue;
  17.  width: 300px;
  18.  height: 400px;
  19. }
  20.  
  21. .dos
  22. {
  23.  background-color: red;
  24.  width: 150px;
  25.  height: 200px;
  26. }
  27. </head>
  28. <div class="uno">
  29.  <div class="dos"></div>
  30. </div>
  31. </body>
  32. </html>

No me he parado a mirar compatibilidad con navegadores etc, eso lo haces tu pero son 2 lineas mas como aquel que dice.

Última edición por enrique4480; 07/12/2010 a las 16:56