CSS里面从height:0px;到鼠标经过(hover)height:auto;无法应用transition动画

登录注册 才能点赞哟!(ง,,• ᴗ •,,)ง ✧
普通
CSS里面从height:0px;到鼠标经过(hover)height:auto;无法应用transition动画

因为边栏输出的评论字节过多想隐藏改成一行
又想鼠标经过的时候显示完整
于是想到了这个….再加个transition应该有点酷炫的样子

但是发现直接定义height 鼠标hover后height的值无法动画效果
然后改用这个方法兼容性挺高

代码用于多说的近期评论,当然也可以用在别的地方
效果见首页:DIANwo点我点我!
#ds-recent-comments li.ds-comment .ds-excerpt {
max-height: 18px;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
#ds-recent-comments li.ds-comment:hover .ds-excerpt {
max-height: 800px;
transition: max-height 0.25s ease-in;
}

评论 (2)

没人点赞

发表评论