如何使菜单容器在悬停两个元素以外的所有元素时隐藏

How to make menu container hide when hovering all but two elements?

本文关键字：元素 两个 隐藏 菜单 何使 悬停      更新时间：2023-09-26

所以我正在为我的主菜单构建一个小的"UberMenu"功能，它几乎可以随心所欲地工作，只是如果鼠标不在上，我希望UberMenu容器隐藏起来

1） Uber菜单按钮或

2） UberMenu容器

现在，如果您将鼠标悬停在UberMenu按钮上，容器就会显示出来，如果您进入UberMenu容器，然后继续将鼠标悬停到另一个菜单项上，容器会隐藏起来。

这就是我想要的，但是，如果我将鼠标悬停在UberMenu按钮上，然后立即悬停在另一个菜单项上，容器将保持打开状态。

我尝试了十几个不同的片段，但都没有找到解决方案。

我想我需要在代码中添加一些if/else语句？

有人能在这里给我一些指导吗？非常感谢！：-）

这是我使用的代码：

//When mouse hovers UberMenu button, Show Container
$(".uber-menu-test").hover(function(e) {
e.preventDefault(); //To prevent default anchor tag behaviour
e.stopPropagation(); //To prevent parent container click event from firing
$(".uber-menu-frame").show(800);
});
// If mouse hovers either the content area or the navbararea, hide UberMenu    container again
$(".block-type-content, .navbararea").mouseenter(function() {
$(".uber-menu-frame").hide(800);
});

我自己通过添加计时器找到了一个解决方案，我不确定这段代码有多扎实，但据我所知，它确实很管用！

对于任何感兴趣的人：

$(".uber-menu-test").hover(function(e) {
    e.preventDefault(); //To prevent default anchor tag behaviour
    e.stopPropagation(); //To prevent parent container click event from firing
    $(".uber-menu-frame").show(800);
});

var myTimer = false;
$(".uber-menu-test ,.uber-menu-frame").hover(function(){
    //mouse enter
    clearTimeout(myTimer);
},function(){
    //mouse leav
  myTimer = setTimeout(function(){
         $(".uber-menu-frame").fadeOut(800);
    },100)
});

希望它能有所帮助，

$(".uber-menu-test").mouseenter(function(){
    $(".uber-menu-frame").show(800);
}).mouseleave(function(){
    $(".uber-menu-frame").hide(800);
});
相关文章：