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褪色下拉菜單

回答

相關問題