0

想象一下以下场景：您有一个包含多个项目的菜单（顺便说一句，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("*")检索白条内的所有元素，只要将鼠标悬停在其中一个上，白条就会消失。尽管如此，这第二组代码似乎是使白条消失所必需的，不仅在悬停在菜单项之外时。

如何改进任一代码片段以使其满足以下两个要求：

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

1 回答 1

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

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

于 2012-11-25T15:56:20.777 回答