check for ('div') mouseenter on ('a') mouseleave

Question

mi problema es el siguiente: Recibí un disparador (a) y una ventana emergente (div). El div no se encuentra anidado dentro del ancla.

• Cuando cierro sobre un, quiero que aparezca el div.
• Cuando voy de a a div, quiero que permanezca visible.
• Cuando salgo del div, quiero que se cierre.
• Cuando cierro sobre a y me voy sin ingresar el div, quiero que el div se cierre.

Tengo la mayor parte de eso resuelto, pero ahora estoy luchando con el requisito no. 2. Al verificar mouseleave en a, compruebo si hay un mouseenter en el div. Si es así, quiero abortar el mouseleave. Si no, quiero cerrar el div.

¿Qué estoy haciendo mal? ¿Es esta la forma correcta de hacer esto?

Aquí está el marcado:

<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a> 
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div> 

Aquí está el jQuery:

$('.popup_toggle').mouseenter(function() { 
     var element = $(this).next('.popup_div'); 
     $.data(this, 'timer', setTimeout(function() { 
      element.show(100); 
     }, 500)); 
    }); 

    $('.popup_toggle').mouseleave(function() { 
     clearTimeout($.data(this, 'timer')); 
      if($('.popup_div').mouseenter==true) 
      { 
       return false; 
      } 
      else 
      { 
       $('.popup_div').hide(100) 
      }; 
    }); 

Answer 1

Lo que estás tratando de hacer es bastante simple. Al ingresar al desencadenador, identifique el panel (capa, emergente, lo que sea), guarde la referencia el uno al otro usando .data() y haga que los controladores de eventos verifiquen si los objetivos relacionados son el activador (desde la vista del panel) o el panel (desde la vista de disparador). Lancé algo juntos. Eche un vistazo al registro de la consola para ver cómo funciona ... http://jsfiddle.net/rodneyrehm/X5uRD/

Answer 2

que muy probablemente no va a funcionar ... no. Sugeriría que agregue una devolución de llamada mouseenter y mouseleave al elemento <div> también y que establezca una variable global que indique a sus otras devoluciones cómo manejar sus eventos, es decir, "si la variable global es verdadera, no oculte la ventana emergente en mouseleave, de lo contrario, oculta popup "o algo como esto.

El otro enfoque sería comprobar si el mouse está dentro de la ventana emergente cuando la devolución de llamada mouseleave intenta ocultar la ventana emergente. Sin embargo, podría ser mucho más trabajo de lo que vale.

Answer 3

Creo que el problema con su aplicación es que el mouseenter en el div se incendió poco después de la mouseleave del a.

Esto le daría algo así como:

$('.popup_toggle').mouseenter(function() { 
    // Clear any pending "hide" timer 
    // Set a show timer 
}); 

$('.popup_toggle').mouseleave(function() { 
    // Clear any pending "show" timer 
    // Set a hide timer 
}); 

$('.popup_div').mouseenter(function() { 
    // Clear any pending "hide" timer 
}); 

Tenga en cuenta que usted tiene que asegurarse de que acceda al mismo temporizador tanto de la .popup_toggle evento y el evento .popup_div. Es posible que desee considerar utilizar Ben Alman's doTimeout plugin para ayudar con esto. Esto (por lo general) da como resultado un código mucho más claro que el trabajo manual con setTimeout/clearTimeout.