当鼠标远离子弹时，隐藏子菜单

我想创建一个子菜单，当鼠标悬停在菜单项上时出现。我遇到了一个问题，当鼠标离开子菜单时，我希望子菜单消失，例如鼠标移动到网站的底部或左侧或右侧。当鼠标远离子弹时，隐藏子菜单

这里是我的菜单中的脚本，我做我的菜单中的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"); 
}); 
*/ 

});

来源

2012-04-13 palAlaa

追加这个给你jQuery代码

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

希望这有助于

我只是增加了一个处理程序对整个子菜单的div mouseleaves当它淡出

来源

2012-04-13 22:07:58

这是新的jsfiddle ........ http://jsfiddle.net/sandeeprajoria/2jUQS/10/ – 2012-04-13 22:11:16

谢谢你工作:) – palAlaa 2012-04-13 22:20:22

当鼠标远离子弹时，隐藏子菜单

回答

相关问题