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

Question

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

Keep a second div visible if the mouse is over the first or second div

如何才能让第二个 div 在 (即 1 秒) 延迟后显示，然后在鼠标悬停在第一个或第二个 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

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

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