悬停在子级上与悬停在父级上不同

Question

想象以下场景：您有一个包含多个项目的菜单（顺便说一句，wordpress 菜单），并且您希望在其下方显示一个带有一些链接的白条，但前提是您将鼠标悬停在一个特定的菜单项上。然后，当您离开菜单项并将鼠标悬停在菜单正下方的白条本身上时，它应该仍然存在，因为您希望能够单击其中的链接。只有当鼠标既没有悬停在菜单项上，也没有悬停在白条本身或任何包含的元素上时，白条才会再次淡出。

这是我想出的：

$("#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("*") 来检索白条内的所有元素，只要将鼠标悬停在其中一个上，白条就会消失。尽管如此，这第二组代码似乎对于使白条消失不仅在悬停菜单项时是必要的。

如何改进任一代码 sn-p 使其满足以下两个要求：

• 将鼠标悬停在菜单项和白条本身上时，白条保持不变
• 当没有将鼠标悬停在自身、包含的元素之一和菜单项上时，白条会消失

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

我假设您已经显示了两个元素，因此鼠标可以从一个元素移动到另一个元素而没有间隙。