我取了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>
最佳答案
为 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>
关于html - 没有悬停效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49210480/