jquery懸停菜單

Question

當我在菜單鏈接（class =「menu1」）上懸停時，我正在使用jquery懸停來顯示子菜單（id =「submenu1」）。

我已經使用這個代碼：

sp = $('img[class="menu1"]'); 
pn = $('#submenu1'); 
sp.hover(function(){ 
    pn.show(); 
}, 
function(){ 
    setTimeout(function(){pn.hide();}, 500); 
}); 

pn.hover(function(){ 
    pn.show(); 
}, 
function(){ 
    pn.hide(); 
}); 

的事情是，我希望子菜單留在情況下，用戶懸停在其上。 有時工作，有時不行。 我看到了幾個例子，他們沒有工作對我來說..

編輯：

子菜單不在菜單層次（這是絕對定位）

<!--menu btn to hover above:--> 
<img src="menu.gif" alt="menu" /> 

<!--completly unrelated submenu:--> 
<div id="submenu" > 
... 
</div> 

Answer 1

也許這段代碼可以幫助你。

JS：

$("img[id^='menu']").hover(function(){ 
    $("div[id^='submenu']").hide(); 
    $("#sub" + $(this).attr("id")).show(); 
}, 
function(){ 
    var it = this; 

    setTimeout(function(){ 
     var submenu = $("#sub" + $(it).attr("id")); 

     if(submenu.length > 0 && !submenu.is(":hover")){ 
     submenu.hide(); 
     } 
    }, 200); 
}); 

$("div[id^='submenu']").hover(function(){ 
}, 
function(){ 
    $(this).hide(); 
}); 

$("div[id^='submenu']").hide(); 

HTML：

<!--menu btn to hover above:--> 
<img src="http://www.stackoverflow.com/favicon.ico" alt="menu1" id="menu1" height="30"/> 
<img src="http://www.stackoverflow.com/favicon.ico" alt="menu1" id="menu2" height="30"/> 
<img src="http://www.stackoverflow.com/favicon.ico" alt="menu1" id="menu3" height="30"/> 
<img src="http://www.stackoverflow.com/favicon.ico" alt="menu1" id="menu4" height="30"/> 


<!--completly unrelated submenu:--> 
<div id="submenu3" > 
This is a submenu3 
</div> 

<div id="submenu2" > 
This is a submenu2 
</div> 

<div id="submenu4" > 
This is a submenu4 
</div> 

有了這個代碼，你可以有時會發現小蟲子。問題涉及setTimeout。如果你太慢，子菜單被隱藏。困難來自DOM組織，但你認爲它。

Here有一個jsfiddle來測試代碼。