JQuery: detectar cuándo el mouse deja múltiples elementos

Question

Tengo un menú hecho de Divs, y uno de los DIV tiene una función jQuery Mouseenter que desliza por un menú desplegable:

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

También tengo una función que desliza el retroceso de retroceso del mouse deja el menú desplegable:

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

Esto estaría bien, excepto que cuando el usuario mueve el mouse sobre el lanzador, que fuera nuevamente, sin pasar por el menú desplegable, el menú se mantiene baja.

¿Es posible verificar si el mouse está en cualquiera de los divs?

Editar 1: marcado:

<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

Bueno, de esta manera es bastante errónea ... Abra cualquier menú (por ejemplo, el menú de su navegador) y mueva el mouse, no está oculto. Esta es la forma normal. Cuando hace clic en algún lugar, el menú está oculto (por lo que puede adjuntar el controlador de eventos de clic en el documento). Incluso cuando va a submenú, se muestra cuando el mouse está sobre él, y está oculto cuando mueve el mouse a otro elemento de menú; Pero cuando mueve el mouse fuera del menú, el submenú no está oculto.

Si aún desea implementar su idea, deberá implementar un sistema complejo para controlar las acciones de los usuarios. Agregue el controlador Mouseleave al DropdownLauncher, registre ese usuario dejó este elemento y active el menú desplegable. Ahora en la función que oculta el menú desplegable Compruebe si el mouse está por encima del menú desplegable: cancele la ocultación; De lo contrario, esconda. No olvide limpiar el estado de esa variable ("Left DropdownLauncher"). Por ejemplo, puede ejecutar el menú desplegable que se esconde en 1 segundo después de que el usuario del lanzador de la izquierda.

También tenga cuidado, cuando el usuario se mueve con el mouse bastante rápido (solo sacudidas), el navegador no tiene tiempo para activar algunos eventos (tuve problemas con MouseMove) ... asegúrese de probar este caso.

Bueno, no hay código adjunto, pero espero que tengas la idea.

ACTUALIZAR: Probablemente ya no esté interesado en esta pregunta (la respuesta llega tan tarde, así que lo entiendo), pero he encontrado una solución muy interesante, fácil de soportar:

Haga clic en la página de ejemplos

Abra esa página, hay menú. A medida que lo entendí, esto es lo que quieres implementar (me refiero al mismo comportamiento de la navegación del menú). Después de mirar el código de JavaScript, noté que es muy pequeño, y aún más, no está relacionado con ese menú ... por lo que estaba claro para mí, usan HTML+CSS puro para realizarlo. Solo eche un vistazo a archivo CSS, y también eche un vistazo y un 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>

Todo lo demás es hecho por CSS (específicamente por: Pseudo-Clase Hover). Me gustó ese enfoque. Así que ahora tienes alternativa, al menos;)