1

我对此不是很精通，但是我有一个导航项，在悬停时，带有搜索表单的 div 会向下滑动。目前，当您将鼠标悬停，然后鼠标移出时，div 会保持打开状态，直到您单击关闭按钮。

我正在努力做到这一点，以便当您鼠标移出几秒钟后 div 幻灯片备份时，除非用户仍在 div 或 nav 链接上（即，他们正在填写搜索表单）。

这是我到目前为止所拥有的：

$("#services_link").mouseover(function() {
        $("#services_link").css('background-position','left -73px');
        $("#vendors_dropdown").slideDown(function() {
            setTimeout(HideMe, 4000);
        });
    });

    function HideMe() {
        $("#services_link").css('background-position','left 0');
        $("#vendors_dropdown").slideUp();
    }

这让我和 div 一样在链接悬停时向下滑动，并在 4 秒后向上滑动（无论鼠标光标在哪里）。因此，如果鼠标光标位于链接或 div 上，我只需要 div 保持打开状态。

我已经查看了 3 或 4 个其他类似的问题（和答案），但没有一个能真正做到这一点。setTimeout（和 clearTimeout）对我来说有点新，所以请原谅这个菜鸟问题。:)

4

1 回答 1

1

绑定 mouseenter 和 mouseleave。你会想要在 mouseleave 上做超时，但是当/如果 mouseenter 再次发生时重置它。

试着只看这里选择的答案，看看如何做我在说的。

像这样的东西：

var timeout;
$("#services_link, #vendors_dropdown").mouseenter(function() {
    window.clearTimeout(timeout);
    $("#services_link").css('background-position','left -73px');
    $("#vendors_dropdown").slideDown();
}).mouseleave(function(){
    timeout = window.setTimeout(HideMe, 4000);
});

function HideMe() {
    $("#services_link").css('background-position','left 0');
    $("#vendors_dropdown").slideUp();
}
于 2013-03-19T01:44:19.200 回答