Question

我陷入困境 - 提前感谢任何指示。

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

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

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

对这两个问题的任何帮助？

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

Answer 2

我在这里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;
}

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

2 个答案:

http://jsfiddle.net/8heq7w0b/