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