CSS3中 “hover” 样式 和 动画过渡 的问题。
各位大大，请帮忙解决一下这个问题，先谢谢！
由于之前的代码不是全部帖出，可能造成一点信息误解。
以下是针对这个问题另外写的代码：
<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自动适应高度，又可以正常显示过渡效果呢？
Darcrand浏览 4607回答 2
2回答
-
weibo_哆啦A梦有大口袋_0
从 MDN 的可以查到 CSS 支持动画的属性中的 height 属性如下： height ：yes, as a length, percentage or calc();// 当 height 的值是 length，百分比或 calc() 时支持 CSS3 过渡。所以当元素 height : auto 时，是不支持 CSS3 动画的。你可以通过js精确获取height的，在给它添加CSS3属性解决问题，请采纳(⊙o⊙)哦 -
慕后端6892864
要纠正的是hover 不是css3中才有的，height:auto 里面内容多高，它就多高。
随时随地看视频慕课网APP
CSS3
Html/CSS