jQuery ocultar div en mouseout

Question

Vi un montón de publicaciones sobre este artículo, pero no pude encontrar la solución correcta. Lo siento si ya ha sido respondido en alguna parte.

lo que quiero: Tengo un DIV con mis elementos de menú, que se abre cuando el evento se dispara click de un elemento href. Ahora quiero ocultar el menú, cuando el mouse está fuera del elemento DIV y no está por encima del elemento href. Hasta ahora solo puedo cerrarlo cuando hago clic en el elemento href.

lo tanto, mi jQuery se ve así:

$("#menu_opener").click(function() { 
      if ($("#menudiv").is(":hidden")) { 
       $("#menudiv").slideDown("slow"); 
      } else { 
       $("#menudiv").hide(); 
      } 
     });  

Y mi HTML se parece a esto:

<div> 
<a href="#" id="menu_opener">Menu</a> 
</div> 
<div id="menudiv" style="position: fixed; background-color: white; display: none;"> 
    <a href="#" id="A1">Page 1</a><br /> 
     <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />       
</div> 

Gracias de antemano!

Answer 1

Editar: Perdón, leí la pregunta la primera vez. Tuve que hacer esto un par de veces, y siempre moví el menú un píxel hacia arriba para que se superpusiera al elemento href. Y luego mostrar/ocultar el menú si los elementos href O href están siendo suspendidos.

$("#menu_opener, #menudiv").hover(
    function(){ 
     $("#menudiv").show(); 
    }, 
    function(){ 
     $("#menudiv").hide(); 
    } 
); 

y establezca la propiedad arriba para el estilo de la menudiv lo que se mueve hacia arriba y se superpone el href.

<div> 
    <a href="#" id="menu_opener">Menu</a> 
</div> 
<div id="menudiv" style="position: fixed; top: -1px; background-color: white; display: none;"> 
    <a href="#" id="A1">Page 1</a><br /> 
    <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />       
</div> 

Answer 2

si entiendo el "no está por encima del elemento href" pieza, desea que el menú para permanecer visibles al pasar el ratón fuera del div # menudiv, pero aún ratón por encima de un # menu_opener ??

si ese es el caso, envolvería todo el contenido en un div único y lo atacaría. y use mouseleave sobre mouseout.

http://api.jquery.com/mouseleave/

así, el código HTML se convierte en:

<div id="menu_container"> 
    <div> 
    <a href="#" id="menu_opener">Menu</a> 
    </div> 
    <div id="menudiv" style="position: fixed; background-color: white; display: none;"> 
    <a href="#" id="A1">Page 1</a><br /> 
    <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />       
    </div> 
</div> 

y su secuencia de comandos sería algo así como:

$("#menu_opener").click(function() { 
    if ($("#menudiv").is(":hidden")) { 
     $("#menudiv").slideDown("slow"); 
    } else { 
     $("#menudiv").hide(); 
    } 
}); 
$("#menu_container").mouseleave(function(){ 
    $('#menudiv').hide(); 
}); 

Answer 3

Puede mantener el código HTML tal como está y sólo tiene que añadir lo siguiente:

$("#menudiv").mouseleave(function(){ 
    $(this).hide(); 
}); 

jsFiddle: http://jsfiddle.net/5SSDz/