javascript - 使某些 JS 代码比另一个更重要(鼠标移开时消失)

Question

我知道这可能很愚蠢，但我想知道是否有实现的方法。

基本上，即使在鼠标移出父“dropbtn”按钮或元素 3 秒后，我也希望 dropdown-content 元素“保持显示”。

例如代码:

$(function() {
    $('#dropbtn').hover(function() {
        $('.dropdown-content').css('display', 'block');
    }, function() {
        // on mouseout:
        setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
    });
    $('.dropdown-content').hover(function(){
        $('.dropdown-content').css('display', 'block');
    },function(){
        $('.dropdown-content').css('display', 'none');
    })
});

当前的问题是 setTimeout() 函数在这行 JS 代码上覆盖了我想要的方式:

$('.dropdown-content').css('display', 'block');

换句话说，当且仅当我没有将鼠标光标设置在“下拉内容”div 上时，我希望 setTimeout() 有效。

希望有人能帮忙:)

Answer 1

您可以使用 mouseenter/mouseleave 来“切换”.dropdown-content，而不是使用 hover >，除了 mouseleave 上的 3 秒延迟:

$(function() {
    var dropdownTimeout = null;

    $('#dropbtn').mouseenter(function() {
        if(dropdownTimeout) {
            clearTimeout(dropdownTimeout);
            dropdownTimeout = null;
        }

        $('.dropdown-content').css('display', 'block');
    });

    $('#dropbtn').mouseleave(function() {
        dropdownTimeout = setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
    });
});