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

Question

il mio problema è il seguente: Ho ottenuto un trigger (a) e un popup (div). Il div non giace annidato all'interno dell'ancora.

• Quando passo il mouse su a, voglio che div divenga visibile.
• Quando vado da un al div, voglio che rimanga visibile.
• Quando lascio il div, voglio che si chiuda.
• Quando passo il mouse su ae esco senza entrare nel div, voglio che il div si chiuda.

Ho capito di più, ma ora mi sto battendo con il requisito n. 2. Durante il controllo di mouseleave su a, controllo se c'è un mouseenter sul div. Se lo è, voglio abortire il mouseleave. In caso contrario, voglio chiudere il div.

Cosa sto sbagliando? È questo anche il modo giusto per farlo?

Ecco il markup:

<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> 

Ecco il 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

Quello che stai cercando di fare è abbastanza semplice. Quando si inserisce il trigger, identificare il pannello (layer, popup, qualunque cosa), salvare i riferimenti tra loro usando .data() e fare in modo che i gestori di eventi controllino se i target correlati sono il trigger (dalla vista del pannello) o il pannello (dalla vista trigger). Ho buttato qualcosa insieme. Dai un'occhiata al log della console per vedere come funziona ... http://jsfiddle.net/rodneyrehm/X5uRD/

Answer 2

che molto probabilmente non funziona ... no. Ti suggerisco di aggiungere un callback mouseenter e mouseleave all'elemento <div> e di impostare una variabile globale che indichi agli altri callback come gestire i loro eventi, ad esempio "se la variabile globale è vera, non nascondere il popup su mouseleave, altrimenti nascondi popup "o qualcosa di simile.

L'altro approccio consiste nel verificare se il mouse si trova all'interno del popup quando il callback mouseleave tenta di nascondere il popup. Potrebbe essere molto più lavoro di quanto non valga la pena.

Answer 3

Credo che il problema con la vostra implementazione sia che il mouseenter su div verrà attivato subito dopo lo mouseleave da a.

Questo darebbe qualcosa di simile:

$('.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 
}); 

noti che si dovrà fare in modo che si accede stesso timer sia l'evento e l'evento .popup_toggle.popup_div. Si consiglia di prendere in considerazione l'utilizzo di Ben Alman doTimeout plugin per aiutare con questo. In genere, genera un codice molto più chiaro rispetto a quello manuale con setTimeout/clearTimeout.