各位大大，请帮忙解决一下这个问题，先谢谢！由于之前的代码不是全部帖出，可能造成一点信息误解。以下是针对这个问题另外写的代码：<style>
.nav {
width: 50px;
height: 50px;
overflow:hidden;
background-color: #09F;
transition: all ease-in-out 2s 0s;
}
.nav:hover {
/* 指定高度 */
height: 500px;
}
</style>
---------------------------------------------------------------------------------------------------------
<body>
<div class="nav">
<p>0000</p>
<p>0000</p>
<p>0000</p>
<p>0000</p>
</div>
</body>---------------------------------------------------------------------------------------------------------现在问题就只有一个：.nav:hover {height: 500px;} 会正常显示过渡效果；.nav:hover {height: auto;} 则不会显示过渡效果。由于.nav即不同的子级菜单的高度属性都不一定相同，所以不可能给每一个.nav设置hover样式。那么如何能做到，.nav自动适应高度，又可以正常显示过渡效果呢？
2 回答
已采纳
weibo_哆啦A梦有大口袋_0
TA贡献107条经验 获得超146个赞
从 MDN 的可以查到 CSS 支持动画的属性中的 height 属性如下：
height ：yes, as a length, percentage or calc();
// 当 height 的值是 length，百分比或 calc() 时支持 CSS3 过渡。
所以当元素 height : auto 时，是不支持 CSS3 动画的。
你可以通过js精确获取height的，在给它添加CSS3属性
解决问题，请采纳(⊙o⊙)哦
- 2 回答
- 0 关注
- 4605 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消