我占用了2个div:当我将鼠标悬停在.box1时,.box2将从下往上移动;当我不知道时,.box2会立即隐身,但我希望.box2从上到下缓慢移动然后看不见,我该怎么做?
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
cursor: pointer;
}
.box2 {
width: 200px;
height: 200px;
background: rgba(54, 25, 25, .5);
position: absolute;
top: 200px;
z-index: 1;
visibility: hidden;
}
.box1:hover .box2{
transition: all 1s;
visibility: visible;
top: 0;
}

<div class="box1">
Content in box1
<div class="box2">Content in box2</div>
</div>
&#13;
答案 0 :(得分:0)
为box-2添加转换。如果您为box-1添加overflow: hidden
,这将有助于您防止溢出box-2
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
cursor: pointer;
overflow: hidden
}
.box2 {
transition: all 1s;
width: 200px;
height: 200px;
background: rgba(54, 25, 25, .5);
position: absolute;
top: 200px;
z-index: 1;
visibility: hidden;
}
.box1:hover .box2{
visibility: visible;
top: 0;
}
<div class="box1">
Content in box1
<div class="box2">Content in box2</div>
</div>
答案 1 :(得分:0)
虽然这不是动画和隐藏元素的理想方式(想要平滑过渡尝试使用jQuery)但希望这会帮助你。
从悬停状态中删除transition
并将其添加到.box2
的主要样式
查看代码段以便更好地理解。
.box1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
cursor: pointer;
}
.box2 {
width: 200px;
height: 200px;
background: rgba(54, 25, 25, .5);
position: absolute;
top: 200px;
z-index: 1;
visibility: hidden;
transition: all 1s;
}
.box1:hover .box2{
visibility: visible;
top: 0;
}
&#13;
<div class="box1">
Content in box1
<div class="box2">Content in box2</div>
</div>
&#13;
希望这个帮助