當鼠標懸停在元素上時，CSS不透明度轉換無法在兄弟選擇器上工作

Question

我製作了一個響應式菜單，其中第4個之後的列表項元素在手機上獲得display:none; opacity:0。第四個元素是另一個列表項，它是一個圖標。當你將鼠標懸停在圖標的隱藏菜單項顯示爲一個塊列表下方使用

li:nth-child(4):hover ~ li { display:block; opacity:1; }

無論在哪裏我堅持transition: all 0.5s ease在我的CSS我不能讓一個過渡下去。我是否正在嘗試做一些行不通的工作，因爲我是在兄弟姐妹選擇器上工作，或者我做錯了什麼？

查看小提琴：https://jsfiddle.net/nicoleamurray/zap1L8hq/顯示手機版本。

更新：與height很好地工作！

`.mainmenu{ 
float: right; 
text-align: right; 
} 
.mainmenu li{ 
display:inline-block; 
} 
.mainmenu li:nth-child(4):hover ~ li{ 
opacity:1; 
transition-delay: 0s; 
height: 20px; 
} 
.mainmenu li:nth-child(n+5){ 
opacity:0; 
overflow: hidden; 
height: 0; 
display: block; 
transition: all 0.5s 1s; 
}` 

Answer 1

你可以不過渡display:財產。它不是被看見就是被隱藏起來。沒有任何「中間」變體可以過渡到/從中。

如果兩個狀態都設置爲display: block;那麼轉換函數。 inline-block也有效..但可能意味着其他一些佈局細化是必要的。對於下面的代碼片段，我只是用block;

body { margin: 50px;} 
 

 
.mainmenu{ 
 
    float: right; 
 
    text-align: right; 
 
} 
 
.mainmenu li{ 
 
    display:inline-block; 
 
} 
 
.mainmenu li:nth-child(4):hover ~ li{ 
 
    display:block; 
 
    opacity:1; 
 
} 
 

 
.mainmenu li:nth-child(n+5){ 
 
    display:block; 
 
    opacity:0; 
 
    transition: all 0.5s ease; 
 
}

<ul class="mainmenu" role="menubar"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Features</a></li> 
 
    <li><a href="#">Pages</a></li> 
 
    <li class="mainmenu__icon">:</li> 
 
    <li><a href="#">Events</a></li> 
 
    <li><a href="#">Shortcodes</a></li> 
 
    <li><a href="#">Demo</a></li> 
 
</ul>