Question

当用户将鼠标悬停在图像上时，我试图将某些菜单项向下滑动，然后在将光标移离图像和/或菜单项时隐藏。问题是，如果用户在将鼠标移动到菜单项时不是真的非常准确，菜单项将向上，向下，向上......向下滑动。

有没有办法使这个工作，以便一旦菜单项出现，它们将保持原位，直到用户“鼠标移出”主图像或图像下方的链接项？

这是一个JSFiddle。任何帮助表示赞赏。

Answer 1

在.slideBucket个孩子上调用时，停止悬停事件的传播。您还需要将slideBucket定位，使其与铲斗重叠，并且不会触发鼠标移动。然后在slideBucket上手动执行slideUp。添加.stop(true, true)也有助于清理动画：

http://jsfiddle.net/gilly3/yHMQV/9/

$(".bucket").hover(function() {
    $(this).children('.slideBucket').stop(true, true).slideToggle('400');
}).children('.slideBucket').hover(function(e) {
    e.stopPropagation();
}, function(e) {
    e.stopPropagation();
    $(this).slideUp(400);
});

Answer 2

这是我的版本：jsfiddle
悬停实际上有两个功能:-)

$(document).ready(function(){  
    $(".bucket").hover(  
        function(){  
            $(this).children('.slideBucket').slideDown('400');  
        },  
        function(){  
            $(this).children('.slideBucket').slideUp('400');  
        }  
    );  
});

jQuery - slideToggle，链接继续上下滑动

2 个答案: