悬停在儿童上与悬停在父母上不一样

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(); 
});​ 

我假设你有两个元素显示，所以鼠标可以从一个到另一个没有差距。