javascript - 鼠标移开 15 秒后隐藏 div

Question

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

1. 页面加载后，如果弹出式 div 15 秒内没有任何操作，它将自动隐藏。
2. 页面加载后，如果鼠标移出弹出式 div，则 div 将在鼠标移出 15 秒后隐藏。
3. 页面加载后，如果鼠标位于弹出窗口上，则弹出窗口将不会隐藏，直到鼠标移开。

代码:

$(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的变量，或者在鼠标关闭时重置它。如果您将鼠标悬停在 Activity 上，则该超时功能将被清除(取消)，并在鼠标移开时重新启动

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