我目前正在設計一個CSS的「超級下拉選單」 - 基本上是一個常規的純CSS下拉選單，但其中包含不同類型的內容。
目前，似乎CSS 3的過渡效果不適用於「display」屬性，也就是說，無法從display: none過渡到< code>display: block（或任何組合）。
在上面的範例中，有沒有辦法讓第二層選單在有人懸停在頂級選單項目上時「淡入」？
我知道可以在visibility:屬性上使用過渡效果，但我無法想出有效使用的方法。
我還嘗試使用高度，但結果非常糟糕。
我也知道使用JavaScript可以輕鬆實現這一點，但我想挑戰自己只使用CSS，但我覺得我有點力不從心。
您需要透過其他方式隱藏元素以使其正常工作。
我透過將兩個都設定為絕對定位，並將隱藏的一個設為- 將
- 將
- 將元素定位到具有
點贊+0
新增回覆
P粉608647033
opacity: 0來實現效果。如果您將
display屬性從none切換到block，則其他元素的過渡效果將不會發生。為了解決這個問題，總是允許元素為
display: block，但透過以下任何方式隱藏元素：height設定為0。opacity設定為0。overflow: hidden的另一個元素的框架之外。可能還有更多解決方案，但如果將元素切換為
display: none，則無法執行過渡。例如，您可能嘗試類似於以下內容的操作：div { display: none; transition: opacity 1s ease-out; opacity: 0; } div.active { opacity: 1; display: block; }但這將不會起作用。根據我的經驗，我發現這樣做沒有任何效果。
因此，您始終需要保持元素的
display: block- 但您可以透過以下方式繞過此問題：div { transition: opacity 1s ease-out; opacity: 0; height: 0; overflow: hidden; } div.active { opacity: 1; height: auto; }您可以連接兩個或更多的過渡效果，而
visibility此時會很方便。div { border: 1px solid #eee; } div > ul { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } div:hover > ul { visibility: visible; opacity: 1; }