Question

所以当你将鼠标悬停在菜单按钮上时，我会创建一个显示各种div的菜单，但问题是当你将鼠标悬停在按钮上时会立即触发事件，这是我不想要的，因为如果你滑动了鼠标悬停在一个以上的按钮上，然后它们全部触发并显示/隐藏div容器（看起来很糟糕）。

我希望只有当用户将按钮悬停一段时间（例如500毫秒）时才触发事件，因为这样他们一次只能看到一个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)
});

小提琴：http://jsfiddle.net/1g0Lraec/5/

这让我疯了，我希望有人可以帮助我！

谢谢:-)

Answer 1

您可以使用：

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

仅在X时间悬停按钮时显示Div - 无法使其正常工作

1 个答案: