不能在另一個div上懸停更改div風格

Question

代碼似乎是正確的，但根本不起作用。

HTML它

<div class="logo5"> 
    <a class="underlogolink" id="expandlogonav" href="whatever.com" > 
     <div class="underlogotext alcenter">{{settings.underlogotext}}</div> 
    </a> 
</div> 
<div class="logo6" id="underlogonav"> 
    <ul> 
     <li>Test 1</li> 
     <li>Test 2</li> 
     <li>Test 3</li> 
     <li>Test 4</li> 
     <li>Test 5</li> 
    </ul> 
</div> 

和CSS

#underlogonav { 
    height:0px; 
    overflow-y:hidden; 
    -webkit-transition:0.5s; 
    -moz-transition:0.5s; 
    -ms-transition:0.5s; 
    -o-transition:0.5s; 
    transition:0.5s; 
} 
#expandlogonav:hover ~ #underlogonav { 
    height:auto; 
} 

可否請你指出我在哪裏出了錯。

Answer 1

#underlogonav不是#expandlogonav的兄弟姐妹。

您需要有一個與該元素實際匹配的選擇器。

您可以將光標懸停在包含#expandlogonav的div上。

注意：如果您修復該問題，則轉換仍然無效，因爲您無法轉換爲高度爲auto的高度。