Question

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

我有两个相互重叠的div。 div＃2未显示(display:none)的地方。

现在我想要的是，如果我将鼠标悬停在div＃1上，div＃2会在当前位置向下滑动（打开）。

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

我让a fiddle来说明我的div职位。

Answer 1

使用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;
});

http://jsfiddle.net/mblase75/TxnDd/2/

Answer 2

我将div＃2移到div＃1中，这让我只用css做了这个 http://jsfiddle.net/57Shn/

CSS

.button {width:100px; height:50px; position:fixed; background-color:blue; margin-top:30px;}
.button:hover .showme {display:block}
.showme {width:100px; height:200px; position:fixed; background-color:red; display:none; margin-top:30px;}

HTML

<div class="button">
    touch me
    <div class="showme">show me</div>
</div>

Answer 3

仅CSS解决方案:(不滑动）

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

CSS：

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

JS解决方案：

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

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

3 个答案: