JQuery: rilevare quando il mouse lascia più elementi

Question

Ho un menù a base di div, e uno dei div ha una funzione mouseenter JQuery che scorre verso il basso un menu a discesa:

$(".dropdownLauncher").mouseenter(function() {
  $(".dropdown").slideDown("slow");
});

ho anche una funzione che scorre l'elenco a discesa di back up delle foglie del mouse menu a discesa:

$(".dropdown").mouseleave(function() {
  $(".dropdown").slideUp("slow");
});

Questo andrebbe bene, tranne che quando l'utente sposta il mouse sopra il lanciatore, che ancora una volta fuori, senza passare attraverso il menu a discesa, i soggiorni menu a discesa.

E 'possibile controllare se il mouse è in uno dei div?

EDIT 1: Markup:

<div class="menu">
                <div class="menuItem selectedItem">Home</div>
                <div class="menuItem unselectedItem leftBorder dropdownLauncher">About <img src="Arrow.gif"></div>
                <div class="dropdown">
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                </div>
                <div class="menuItem unselectedItem leftBorder">Visiting</div>
                <div class="menuItem unselectedItem leftBorder">Newsletters</div>
                <div class="menuItem unselectedItem leftBorder">Ecology</div>
            </div>

Answer 1

Bene, in questo modo è abbastanza buggy ... aprire qualsiasi menù (ad esempio menu del browser), e il mouse in movimento - non è nascosto. Questo è il modo normale. Quando si fa clic da qualche parte allora menù è nascosto (in modo da poter collegare gestore di eventi click per documento). Anche quando si va a sottomenu, viene mostrato quando il mouse è su di esso, ed è nascosto quando si sposta il mouse a un'altra voce di menu; ma quando si sposta il mouse fuori menù, sottomenù non è nascosto.

Se ancora voglia di implementare la vostra idea, è necessario implementare sistema complesso di azioni degli utenti di controllo. aggiungi gestore mouseLeave a dropdownLauncher, registrare l'utente ha lasciato questo elemento e grilletto menu a discesa nascondersi. Ora, in funzione che nasconde discesa di controllo menu se il mouse è sopra menu a tendina - annullano a nascondersi; altrimenti nasconderlo. Non dimenticare di stato pulito di quella variabile ( "sinistra dropdownLauncher"). Per esempio. è possibile eseguire discesa nascondiglio menù in 1 secondo dopo che l'utente ha lasciato Launcher.

Anche fare attenzione, quando utente sposta il mouse abbastanza veloce (solo cretini), il browser non ha tempo per attivare alcuni eventi (ho avuto problemi con MouseMove) ... Assicurarsi che si prova questo caso.

Bene, nessun codice attaccato, ma spero che si ottiene l'idea.

UPDATE: Probabilmente non sono interessati a più questa domanda (risposta arriva così tardi, così ho capito;), ma ho trovato soluzione molto interessante, facile da supporto:

Clicca Esempi Pagina

aprire quella pagina, non c'è menu. Come ho capito, questo è ciò che si desidera implementare (intendo lo stesso comportamento di navigazione del menu). Dopo aver guardato il codice JavaScript ho notato che è molto piccola, e ancora di più, non è legata a quella del menu ... Così è stato chiaro per me, usano puro HTML + CSS per eseguirla. Basta dare un'occhiata al piccolo file css , e anche dare un'occhiata e menù HTML markup:

<div id="rootMenu" class="menustyle">
  <ul class="menubar">
      <li class="topitem">
        <a class="selected" href="_link_"><img border="0" src="/click-examples/assets/images/home.png" alt=" Home" class="link"> Home</a>
        <ul class="submenu">
           <li>
              <a title="BorderPage Java source" target="_blank" href="_link_">BorderPage Class</a>
           </li>
           <li>
              <a title="Page border HTML template" target="_blank" href="_link_">Border Template HTML</a>
            </li>
            ....
        </ul>
      </li>
      ....
   </ul>
   ....
</div>

tutto il resto è fatto da CSS (nello specifico da: hover pseudo-classe). Mi piaceva questo approccio. Così ora avete alternativa, almeno;)