Question

所以我有2个div。一个是“顶部”，一个是“菜单”。当你将鼠标悬停在JQuery的“top”上时，我得到了“菜单”，如图所示：

$(".top").mouseover(function(){
    $(".menu").fadeIn(200);
});

$(".top").mouseout(function(){
    $(".menu").fadeOut(200);
});

但我想这样做，如果我也在“菜单”上徘徊，“菜单”将保持淡入。我将如何做到这一点？

Answer 1

我相信这会为你做到。在隐藏菜单之前等了半秒钟。如果用户在那段时间内悬停在菜单上，则取消隐藏操作。

var timer;

$(".top").mouseover(function(){
    clearTimeout(timer);
    $(".menu").fadeIn(200);
});

$(".top, .menu").mouseout(function(){
    timer = setTimeout(function() {
        $(".menu").fadeOut(200);
    }, 500);
});

$(".menu").mouseover(function() {
    clearTimeout(timer);
});

Answer 2

添加一个记住您是否悬停在菜单上的变量：

var isHoveringMenu;

$(".menu").mouseover(function(){
    isHoveringMenu = true;
});

$(".menu").mouseout(function(){
    isHoveringMenu = false;
    $(".menu").fadeOut(200); // you probably want this here
});

$(".top").mouseover(function(){
    $(".menu").fadeIn(200);
    isHoveringMenu = true; // not necessary, but sounds good
});

$(".top").mouseout(function(){
    if (!isHoveringMenu) {
        $(".menu").fadeOut(200);
    }
});

你可能想稍微调整一下 - 最好的解决方案取决于两个div之间的空间关系，所以我们需要先看看布局。

JQuery如果悬停在任一元素上

2 个答案: