JQuery 如果悬停在任一元素上

Question

所以我有2个div。一种是“顶部”，一种是“菜单”。当您将鼠标悬停在 JQuery 中的“顶部”上时，“菜单”会淡入，如图所示：

$(".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 之间的空间关系，因此我们需要首先查看布局。