懸停在兒童上與懸停在父母上不一樣

Question

想象一下以下場景：您有一個包含多個項目（一個wordpress菜單btw）的菜單，並且在下面您想要顯示帶有一些鏈接的白色欄，但只有當你懸停在一個特定的菜單項上。然後，當您離開菜單項並將鼠標懸停在菜單正下方的白色條上時，它應該仍然存在，因爲您希望能夠點擊其中的鏈接。當鼠標既不懸停在菜單項上，也不在白條本身或任何包含的元素上時，白條只應再次淡出。

以下是我想出了：

$("#menu-item-62").hover(function(){ //this is the menu item 
    $(".white_bar_artists").show(); //this is the white bar that shall be shown 
}, function(){ 
    if(!$(".white_bar_artists").is(":hover")){ //the white bar should only disappear, if the user hovers neither over it nor the menu item 
     $(".white_bar_artists").hide(); 
    } 
}); 

到目前爲止，一切都很好。唯一的問題是，當我將鼠標懸停在菜單項上時，白色條只會消失，而不是當我懸停在白色條本身之外時。這就是爲什麼我添加以下代碼：

$(".white_bar_artists").find("*").mouseout(function(){ 
    $(".white_bar_artists").hide(); 
    $(".white_bar").show(); 
}); 

有趣的是，即使我用find("*")檢索白條內的所有元素，當我將鼠標懸停在其中的一個，白條消失。儘管如此，第二組代碼似乎是必要的，以便不僅在菜單項懸停時白色條消失。

如何提高或者代碼片段，使其符合以下兩個條件：

• 懸停在菜單項和白條本身時，白條保持
• 白色欄消失時不懸停在其自身上，其中一個包含元素和菜單項

Answer 1

將懸停操作也綁定到白色條。菜單項失去懸停觸發隱藏，但白色的酒吧有一個懸停的時間觸發顯示。

$("#menu-item-62, .white_bar_artists").hover(function(){ 
    $(".white_bar_artists").show(); //this is the white bar that shall be shown 
}, function(){ 
    $(".white_bar_artists").hide(); 
});​ 

我假設你有兩個元素顯示，所以鼠標可以從一個到另一個沒有差距。