jQuery slider 问题

Question

我正在尝试做一些我不知道该怎么做，但我知道可以做到的事情。有 2 个 div，它们都扩展了浏览器窗口的整个宽度，它们的高度都是 450px。所以基本上是一个方 block 在另一个上面。我想在这两者之间放置一个 div，它是通过将鼠标悬停在顶部 Div(按钮或其他)中的某个东西上显示出来的。悬停项将位于顶部 div 的底部。

但我需要中间的 div 在其内容悬停时保持事件状态...。

jquery 会是什么样子？这是我目前所拥有的。

    <script type="text/javascript">
        $(document).ready(function() {
            $("#toggleh1").hover(function() {
                 $(".header2").slideDown(400);

            }, function() {
                 $(".header2").slideUp(400);
            });
        });
    </script>

谢谢

Answer 1

你最好的选择可能是使用超时而不是 .hover()

$(document).ready(function() {
    var t; // This will be a timeout
    $('#toggleh1').mouseover(function() {
        if (t)
        {
            clearTimeout(t);
        }

        $('.header2').slideDown(400);
    }).mouseout(function() {
        t = setTimeout(function() {
            $('.header2').slideUp(400);
        }, 500); // .5 second delay before hiding
    });

    $('.header2').mouseover(function() {
        if (t)
        {
            clearTimeout(t);
        }
    }).mouseout(function() {
        t = setTimeout(function() {
            $('.header2').slideUp(400);
        }, 500); // .5 second delay before hiding
    });
});

为了进一步解释，当您将鼠标悬停在触发元素上时，将显示 div。当您的鼠标离开触发元素时，浏览器开始 0.5 秒倒计时。如果倒计时结束，div 将被隐藏。如果在倒计时结束之前，您将鼠标悬停在触发器或 div 本身上，倒计时将停止。如果您的鼠标离开 div，倒计时将重新开始。

请注意，您可能想尝试使用 .mouseover() 与 .mouseenter()，以及 .mouseout() 与 .mouseleave()