仅使用 CSS 使一个 div 滑过另一个答案

【问题标题】：Make one div slide over another using only CSS仅使用 CSS 使一个 div 滑过另一个
【发布时间】：2014-12-06 16:00:18
【问题描述】：

我试图拥有 2 个大小相同的 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>

【问题讨论】：

标签： html css animation

【解决方案1】：

我在这里做了http://jsfiddle.net/sdL1vead/的改进版http://jsfiddle.net/tongadall/trqj1qgo

html

<div class="box">
<div class="stay-in-place">
    <h1>hello world</h1>
    <p>ipsum dolorum caveat emptor veni vidi vici</p>
</div>
<div class="move-in-to-place">
    <span>I'm on top</span>
</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%;
    padding: 8px;
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    font-size: 12px;
    line-height: 1.2;
}
.box {
    margin: 2px;
    float: left;
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
.box:hover .move-in-to-place {
    bottom: 0;
    -webkit-transition: all 0.4s, -webkit-transform 0.4s;
    transition: all 0.4s, transform 0.4s;
    width: 100%;
    height: auto;
    opacity: 1;
}
.box:not(hover) .move-in-to-place {
    bottom: -100%;
    -webkit-transition: all 2s, -webkit-transform 2s;
    transition: all 2s, transform 2s;
    width: 100%;
    height: 0;
    opacity: 0;
}

【讨论】：

【解决方案2】：

这就是我认为你想要的：

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

【讨论】：

没有绝对定位也能实现同样的行为吗？
不，绝对定位使其相对于父级。