當鼠標遠離子彈時，隱藏子菜單

Question

我想創建一個子菜單，當鼠標懸停在菜單項上時出現。我遇到了一個問題，當鼠標離開子菜單時，我希望子菜單消失，例如鼠標移動到網站的底部或左側或右側。

這裏是我的菜單中的腳本，我做我的菜單中的jsfiddle http://jsfiddle.net/2jUQS/1/

<div id="header"> 
    <ul id="menu"> 
    <li> 
     <a href="#" class="wordsMenu">About Company</a> 
    </li> 
    <li> 
     <a href="#" class="galaryMenu">Gallary</a> 
    </li> 

</ul> 
</div> 
    <div id="submenus"> 
     <div id="galarySubMenu" class="subMenuContainer"> 
    <ul class="subMenuList"> 
     <li><a href="PhotoGallery.php">Photo Gallary</a></li> 
     <li><a href="videoGallery.php">Video Gallary</a></li> 
    </ul> 
</div> 

</div> 

一個sapmle這裏是腳本

$("document").ready(function(){ 


    $("a.wordsMenu").bind('mouseover',function(){ 
    $("#galarySubMenu").fadeOut("fast"); 
    }); 

$("a.galaryMenu").bind('mouseover',function(){ 


    $("#galarySubMenu").css("display","block"); 
    var margin_top = $("#header").height(); 
    var testMarginTop=parseInt($("#galarySubMenu").css("top")); 
    if(testMarginTop<0){ 
     $("#galarySubMenu").animate({ 
      'top':margin_top-2 
     }, { 
     'duration':500, 
     queue:false 
    }); 
    } 
    else{ 
     $("#galarySubMenu").animate({ 
      'top':'-300' 
     }, { 
     'duration':500, 
     queue:false 
    }); 
    } 
}); 

/* 
$(".subMenuList").mouseout(function(){ 
     $("#galarySubMenu").fadeOut("fast"); 
}); 
*/ 

}); 

Answer 1

追加這個給你jQuery代碼

$("#submenus").on('mouseleave',function(){ 
     $("#galarySubMenu").animate({ 
       'top':'-300' 
      }, { 
      'duration':500, 
      queue:false 
     }) 
    }) 

希望這有助於

我只是增加了一個處理程序對整個子菜單的div mouseleaves當它淡出