javascript - 延迟一段时间后显示第二个 div 并在鼠标悬停在第一个或第二个 div 上时保持第二个 div 可见

Question

在上一个问题的上下文中：-

如果鼠标在第一个或第二个 div 上，则保持第二个 div 可见

如何做到这一点，以便在延迟（即 1 秒）后显示第二个 div ，然后如果鼠标悬停在第一个或第二个 div 上，则保持 div 可见。

我已经取得了一些进展，但它不起作用。为什么它不起作用？

现在的进展 ：-

var display = false;

$(".the-dropdown, .menu-item").hover(function () {    
    display = true;
    setTimeout(function () {
        show_sub_menu($(this));
    }, 1000);
}, function () {
    display = false;
    setTimeout(function () {
        hide_sub_menu($(this));
    }, 1000);    
});

function show_sub_menu(obj) {
    //alert(obj); // debugging
    if (display === true) {
        obj.show();
    }
}

function hide_sub_menu(obj) {
    if (display === false) {
        obj.hide();
    }
}

jsfiddle

Answer 1

试试这个：演示

$('.menu-item , .the-dropdown').hover(
    function(){
               $("div.the-dropdown").delay('1000').show();
              }
    , function(){
              $("div.the-dropdown").delay('1000').hide();
              }
);

Answer 2

对于那些正在寻求这个问题的答案的人：-

jsfiddle

var display = false;
$(".the-dropdown, .menu-item").hover(function () {    
    display = true;
    setTimeout(function () {        
        if (display === true) {            
            $('.the-dropdown').show();
        }
    }, 300);
}, function () {    
    display = false;
    setTimeout(function () {
        if (display === false) {            
            $('.the-dropdown').hide();
        }
    }, 100);
});