Question

在上一个问题的背景下： -

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

如果鼠标位于第一个或第二个div之上，那么第二个div会在延迟（即1秒）之后显示，然后保持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

尝试这： DEMO

$('.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);
});

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

2 个答案: