鼠标输出15秒后隐藏div

Question

在我的网站上,页面加载时出现弹出窗口,我有三个条件:

1. 页面加载后,如果在15秒内弹出div没有任何动作,那么它将自动隐藏.
2. 页面加载后,如果鼠标在弹出div的外侧,那么div将在15秒的鼠标输出后隐藏.
3. 页面加载后,如果鼠标位于弹出窗口,则弹出窗口将不会隐藏直到mouseout.

码:

$(document).ready(function () {
    // Action on mouseover from pop-up
    $('#activity').on("mouseover", function(e) {
        ('#activity').show();
    });

    // Action on mouseout from pop-up
    $('#activity').on("mouseout", function() {
        setTimeout(function() { $("#activity").fadeOut(1500); }, 15000);
    });
setTimeout(function() { $("#activity").fadeOut(1500); }, 15000)
})

Answer 1

只使用.show()函数不会停止你调用的超时函数.您需要清除鼠标悬停时的超时功能.

这会将超时设置为timeout页面加载时命名的变量,或者在mouseoff时重置.如果您将鼠标悬停在活动上,则鼠标悬停时将清除(取消)该超时功能并重新启动

$(document).ready(function () {

    var timeout;

    // Action on mouseover from pop-up
    $('#activity').on("mouseover", function(e) {
        clearTimeout(timeout);
    });

    // Action on mouseout from pop-up
    $('#activity').on("mouseout", function() {
        timeout = setTimeout(function() { $("#activity").fadeOut(1500); }, 15000);
    });

    timeout = setTimeout(function() { $("#activity").fadeOut(1500); }, 15000)
});