Jquery褪色下拉菜单

我试图做一个菜单，当主菜单的按钮（那些有子菜单）悬停在淡出子菜单。Jquery褪色下拉菜单

问题是我有mouseleave使子菜单的div淡出。如果用户使用子菜单悬停在主按钮上方，并且不进入子菜单的div，则子菜单的div将保留在屏幕上。

<style type="text/css"> 
    .dropmenu{ 
     padding:10px 5px 5px 5px;margin-top:14px;display:none;background:#000000;position:absolute;font:normal 14px arial;color:#ffffff;z-index:3; 
    } 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(function() { 
     $('#popm').mouseover(function() { 
      $('#x3').fadeIn("fast", "linear"); 
     }); 
     $('#x3').mouseleave(function() { 
      $('#x3').fadeOut("fast", "linear"); 
     }); 
    }); 
</script> 

<a class="wblinks" id="popm" href="popular.asp">Popular&#x25BC;</a> 
<div id="x3" class="dropmenu" style="margin-left:124px;"> 
    <a class="more" href="popular.asp?t=td">Popular Today</a><br /> 
    <a class="more" href="popular.asp?t=wk">Popular Week</a><br /> 
    <a class="more" href="popular.asp?t=mn">Popular Month</a><br /> 
    <a class="more" href="popular.asp?t=6mn">Popular 6 Months</a><br /> 
    <a class="more" href="popular.asp?t=yr">Popular 1 Year</a><br /> 
    <a class="more" href="popular.asp">All Time</a><br /> 
</div>

我该如何做到这一点，所以div会在没有盘旋时自行消失？

来源

2011-09-05 Patriotec

当鼠标移出#popm时，您可以设置一个计时器。如果用户将鼠标悬停在下拉菜单上，请清除计时器。 http://jsfiddle.net/jUuVz/

来源

2011-09-05 23:37:38 Will

+1为好主意，不需要额外的html标记。我看不出为什么这个答案是由某人下调的。冷静下来的人真的应该为什么留下评论。 – tw16

谢谢。很棒。好东西。 – Patriotec

将鼠标悬停在a.wblinks上会导致子菜单显示正确吗？在这种情况下，您只需将所有内容（a.weblinks & submenu，div.dropmenu）包装在父div中，并将mouseleave事件绑定到该父div。

这和我回答的问题here类似。

来源

2011-09-05 23:38:10 maxedison

Jquery褪色下拉菜单

回答

相关问题