Javascript 当鼠标悬停在其他div上时，使用计时器向下滑动div

我搜索了这个，但没有找到完全解决我问题的解决方案

我有两个div在彼此上方。如果未显示div 2，则显示：无

现在我想要的是，如果我把鼠标悬停在div 1上，div 2会在当前位置滑下打开

当人们在div 2上悬停时，div 2应该保持打开状态，当他们离开div 2的悬停状态超过5秒时，div 2再次向上滑动

---

我做了一个例子来说明我的div位置。

我把div2移到了div1中，这样我就可以只用css来完成这项工作

CSS

HTML

---

使用jQuery使代码更简单。一种方法是将全局变量与setTimeout函数配对。超时检查五秒钟后鼠标是否仍在div之外，如果是，则将鼠标向上滑动，使其看不见

$('.button').click(function() {
    $('.showme').slideDown();
});

$('.showme').mouseout(function() {
    window.isoverdiv = false;
    setTimeout(function() {
        if (!window.isoverdiv) {
            $('.showme').slideUp();
        }
    }, 5000);
});

$('.showme').mouseover(function() {
    window.isoverdiv = true;
});

---

CSS唯一的解决方案：不滑动

<div class="outer">
    <div class="one">Hover</div>
    <div class="two">Hello World!</div>
</div>

JS解决方案：

$(function() {
    $('.two').hide();
    $('.outer').hover(function() { $('.two').stop().slideDown(); });
    $('.outer').mouseout(function() { $('.two').stop().slideUp(); });
});

---

是否允许使用第三方javascript库，如JQuery？这会让事情变得更简单。是的，我被允许这样做，我尝试了很多其他javascript/css3解决方案。但所有这些都要求将div2隐藏在站点的侧面，并从侧面滑动。当鼠标离开div 2时，我想滑动打开它并设置计时器。纯html/css3解决方案可以使用css动画：看看你的新评论，很明显这不是你想要的。你被我否决了，可能不是因为你的问题写得不好，也没有经过深思熟虑，而且你似乎在试图自己解决这个问题。这根本没有解决我的问题，首先我想让它滑动，第二，showme div需要在button div上，第三，当鼠标不在div 2上时，我希望在div 2上有一个计时器，然后将其滑动关闭。这是在我的回答中对该概念的一个更简单的表示。我感谢您的输入，但它确实需要滑动：。添加了滑动JS/jQuery解决方案。这是我的想法，但有可能在1舱悬停时打开它吗？因为现在点击它就会打开。它从顶部向下滑动，是否可以将两者都包裹在一个div中，然后从该div的顶部滑动打开？因为我想保持页边空白。在第一行：将“click”替换为“hover”。我处理了您的输入，得出了这样的结论：它工作得很好，正是我所需要的。非常感谢@lwburk当然，您仍然有一个全局变量“tracker”，它只是一个不同类型的变量。@mblase75-当然，但是共享状态随后被封装，而不是公开给世界。此外，您现在可以创建多个跟踪器，而无需切换多个全局状态标志。问题不在于全局名称空间中存在什么东西；这是脆弱的共享状态。

<div class="outer">
    <div class="one">Hover</div>
    <div class="two">Hello World!</div>
</div>

.two { display: none; }
.outer:hover .two { display: block; }

$(function() {
    $('.two').hide();
    $('.outer').hover(function() { $('.two').stop().slideDown(); });
    $('.outer').mouseout(function() { $('.two').stop().slideUp(); });
});