无法在另一个div上悬停来更改div样式

Question

代码似乎是正确的，但根本不起作用。

html of it

<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高度。