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

如何改进任何代码段，使其符合以下两个要求：

当鼠标悬停在菜单项和白条本身上时，白条会停留
当没有悬停在其自身，其中一个包含的元素和菜单项

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

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

将鼠标悬停在儿童身上与悬停在父母身上的情况不同

1 个答案: