html - 仅使用 CSS 使一个 div 在另一个上滑动

Question

我试图有 2 个相同大小的 div，一个最初是可见的，而另一个(下面？)最初是隐藏的。

我希望当您将鼠标悬停在第一个 div 上时，另一个会动画并向上滑动以完全覆盖第一个。这一个应该保持原位，直到您停止在该区域上空悬停。

我可以让第二个 div 在悬停时向上移动，但它会产生许多不良影响 - 例如当第二个 div 就位时出现神经质/抖动行为 - 在这个 fiddle 中，较低的部分开始可见。

http://jsfiddle.net/cc28samh/1/

HTML

<div>
    <div id="stay-in-place">
        <h1>hello world</h1>
        <p>ipsum dolorum caveat emptor veni vidi vici</p>
    </div>
    <div id="move-in-to-place">
        <h2>I'm on top</h2>
    </div>
</div>

风格

<style type="text/css"> #stay-in-place {
    position:relative;
    height : 200px;
    width : 200px;
    background: red;
    -webkit-transition: height 1s, -webkit-transform 1s;
    transition: height 1s, transform 1s;
}
#stay-in-place:hover {
    height : 0px;
}
#move-in-to-place {
    position:absolute;
    height : 200px;
    width : 200px;
    background: blue;
}
</style>

Answer 1

这就是我想你想要的:

http://jsfiddle.net/8heq7w0b/

更好:http://jsfiddle.net/sdL1vead/

<div class="box">
<div id="stay-in-place">
    <h1>hello world</h1>
    <p>ipsum dolorum caveat emptor veni vidi vici</p>
</div>

<div id="move-in-to-place">
    <h2>I'm on top</h2>
</div>
</div>

CSS

#stay-in-place {
    height: 100%;
    width: 100%;
    background: red;
    position: absolute;
}
#move-in-to-place {
    position: absolute;
    bottom: -100%;
    height : 100%;
    width : 100%;
    background: blue;
    opacity:0;
}
.box {
    position: relative;
    width:200px;
    height:200px;
    overflow:hidden;
}
.box:hover #move-in-to-place {
    bottom: 0;
    -webkit-transition: all 1s, -webkit-transform 1s;
    transition: all 1s, transform 1s;
    width:100%;
    height:100%;
    opacity:1;
}