想实现的效果是:
鼠标悬停在privatecontent-list类上的时候,产生持续0.5s的ease-in-out的动画,使得privatecontent-top缓慢出现
代码:
.privatecontent-list:hover .privatecontent-top{
transition:all ease-in-out .5s 0s;
display: block;
}
不起作用的原因:
display属性不支持过渡效果。
修改思路:
可以尝试使用`opacity`或`visibility`属性,并在过渡效果结束后再将`display`属性设置为`block`
修改后的代码:
.privatecontent-top {
opacity: 0;
transition: opacity ease-in-out .5s 0s;
visibility: hidden;
}
.privatecontent-list:hover .privatecontent-top {
opacity: 1;
visibility: visible;
}