CODEWITHSUNDEEP
htmlcss
whatzi77
whatzi77

Reputation: 75

Can't change a div style with hover on another div

Code seems to be correct, but simply doesn't work.

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>

and the 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;
}

Could you please point me to where i went wrong.

Upvotes: 0

Views: 52

Answers (1)

Quentin
Quentin

Reputation: 944534

#underlogonav is not a sibling of #expandlogonav.

You need to have a selector that actually matches the element.

You could hover over the div containing #expandlogonav instead.

NB: If you fix that, the transition still won't work because you can't transition to auto heights.

Upvotes: 2

Related Questions