没有悬停效果?

时间:2018-03-10 15:00:42

标签: html css

我占用了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;
&#13;
&#13;

2 个答案:

答案 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的主要样式

查看代码段以便更好地理解。

&#13;
&#13;
.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;
&#13;
&#13;

希望这个帮助