只显示潜水时悬停按钮X时间-可以'我不能使它正常工作

Only Show Divs When Hovering Button for X Time - Can't make it work properly

本文关键字：不能 常工作 工作 悬停 潜水 显示 按钮 可以 时间      更新时间：2023-10-12

所以我正在制作一个菜单，当你把鼠标悬停在菜单按钮上时，它会显示各种div，但问题是当你把光标悬停在按钮上时事件会立即触发，这是我不希望的，因为如果你把鼠标滑到多个按钮上，它们会同时触发并显示/隐藏div容器（看起来很糟糕）。

我希望只有当用户将按钮悬停一定时间（如500ms）时才会触发事件，因为这样他们一次只能看到一个div容器。

这是我正在使用的代码，例如菜单按钮：

$(".menu-button").hover(function(e) {
    e.preventDefault(); //To prevent default anchor tag behaviour
    e.stopPropagation(); //To prevent parent container click event from firing
    $(".menu-container").delay(300).slideDown(800);
});

var myTimer = false;
$(".menu-button, .menu-container").hover(function(){
    //mouse enter
    clearTimeout(myTimer);
},function(){
    //mouse leav
  myTimer = setTimeout(function(){
         $(".menu-container").slideUp(500);
    },100)
});

Fiddle：http://jsfiddle.net/1g0Lraec/5/

这让我发疯了，我希望有人能帮我！

谢谢：-）

您可以使用这个：

var upTimer = false ,
downTimer = false ,
isHover = false ;
$(".menu-button, .menu-container").hover(function(){
    isHover = true;
    clearTimeout(upTimer);
    downTimer = setTimeout(function(){
        if(isHover)
        $(".menu-container").slideDown(500);
    },500);
},function(){
    isHover = false;
    clearTimeout(downTimer);

    upTimer = setTimeout(function(){
         $(".menu-container").slideUp(500);
    },100);
});

JSFIDDLE

这也会起作用：

var downTimer = false
$(".menu-button, .menu-container").hover(function(){
    downTimer = setTimeout(function(){
        $(".menu-container").slideDown(500);
    },500);
},function(){
    clearTimeout(downTimer);
    $(".menu-container").slideUp(500);
});
相关文章：