html - 没有悬停效果？

Question

我取了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>

Answer 1

为 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>