css只滑动一个div而不是另一个

Question

我陷入困境 - 提前感谢任何指针.

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

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

我可以让第二个div在悬停时向上移动,但它有许多不需要的效果 - 例如当第二个div到位时的跳跃/抖动行为 - 并且在这个小提琴中,较低的一个开始可见.

对这两个问题有任何帮助吗？

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;
}