jquery - jQuery Slider问题

我正在尝试做一些我不知道该怎么做的事情，但是我知道可以做到的。有2个div，它们都可扩展浏览器窗口的整个宽度，高度均为450px。因此，基本上是在另一个块之上。我想在这两个之间插入一个div，将其悬停在顶部Div（按钮或其他按钮）上的内容即可显示出来。悬停项目将在顶部div的底部。

但是我需要中间div保持活动状态，同时将其内容悬停在...上方。

jQuery是什么样的？到目前为止，这就是我所拥有的。

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

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

谢谢

最佳答案

最好的选择是使用超时而不是.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（）

关于jquery - jQuery Slider问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3215960/