一、需求实现:
在父盒子中有一个子盒子,默认是不显示出来,当鼠标经过的时候显示出来
(1)使用的是显示隐藏的写法:
//HTML
<div className="father">
<div className="child"></div>
</div>
//使用的是scss写法
.father{
width: 200px;
height: 200px;
.child{
width: 100px;
height: 100px;
background-color: yellow;
visibility: hidden;
}
&:hover{
.child{
visibility: visible;
}
}
}
visibility:hidden/visible与display: none/block的区别:visibility还会留下它的位置,display不会,所以用display时可能有其他东西移动位置的情况。(所以这里我们选择用visibility)
(1)使用定位的写法:在子盒子的外部在包裹一个div盒子
//HTML
<div className="father">
<div className="wrap">
<div className="child"></div>
</div>
</div>
//scss文件
.father{
width: 200px;
height: 200px;
.wrap{
position: relative;
width: 100px;
height: 100px;
.child{
position: absolute;
right: 0;
top: -100px;
width: 100px;
height: 100px;
background-color: yellow;
transition: top .2s linear; //可以加一个过渡效果
}
}
&:hover{
.wrap{
.child{
top: 0;
}
}
}
}