我正在尝试做一些我不知道该怎么做,但我知道可以做到的事情。有 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>
谢谢
最佳答案
你最好的选择可能是使用超时而不是 .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 slider 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3215960/