各位大大，請幫忙解決一下這個問題，先謝謝！由于之前的代碼不是全部帖出，可能造成一點信息誤解。以下是針對這個問題另外寫的代碼：<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⊙)哦
-
Darcrand就是說在頁面加載的時候，先用js計算出每個nav的高度，然后分別賦值。 也只能這樣了。
- 2 回答
- 0 關注
- 4703 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消