Display div on hover

Question

I've got a menu that looks something like this

   <nav role="navigation" class="small--hide">
    <ul class="site-nav">
        <li class="has-desktop-dropdown collection-dropdown">Link 1</li>
        <li>Link 2</li>
         <li class="has-desktop-dropdown journal-dropdown">Link 3</li>
    </ul>
   </nav>

Now I want a div to show when one of the list items is hovered

<div class="desktop-dropdown collection-dropdown-menu small--hide">
 <p>Some content</p>
</div>
<div class="desktop-dropdown journal-dropdown-menu small--hide">
 <p>Some content</p>
</div>

The Css I've been trying to use is this:

  .collection-dropdown:hover  ~ .collection-dropdown-menu {
    display:block;
  }
  .journal-dropdown:hover ~ .journal-dropdown-menu {
    display:block;
  }

But it's not showing the div on hover. Any ideas what I'm doing wrong?

Fiddle

You probably have a wrong understanding of what “sibling” means in DOM terms. — CBroe, Aug 01 '18 at 11:11
can you show your code in snippet !! and **do not** use `”` use `"` in `
You've shown two separate elements without showing where they are in the document in relation to each other. How did you expect us to help? — David says reinstate Monica, Aug 01 '18 at 11:13
I believe for tilde operator to work the later has to be the sibling of the former. That doesn't seem to be the case with you. — Saurabh Tiwari, Aug 01 '18 at 11:13

Abin Thaha · Accepted Answer · 2018-08-01T11:22:48.470

It won't work like that. In CSS sibling meaning the adjacent elements of a particular dom element. In your question, collection-dropdown doesn't have a sibling of class collection-dropdown-menu.

.collection-dropdown-menu, .journal-dropdown-menu {
  display: none;
}
.navigation {
  cursor: pointer;
}
.navigation:hover  ~ .collection-dropdown-menu, 
.navigation:hover ~ .journal-dropdown-menu {
  display:block;
}

 <nav role="navigation" class="navigation small--hide">
    <ul class="site-nav">
        <li class='has-desktop-dropdown collection-dropdown'>Link 1</li>
        <li>Link 2</li>
        <li class='has-desktop-dropdown journal-dropdown'>Link 3</li>
    </ul>
</nav>
<div class="desktop-dropdown collection-dropdown-menu small--hide">
 <p>Some content</p>
</div>
<div class="desktop-dropdown journal-dropdown-menu small--hide">
 <p>Some content</p>
</div>

Please watch how this works

In this example, the nav with classname .navigation has siblings collection-dropdown-menu and journal-dropdown-menu. But these are not siblings for collection-dropdown which is an inner element of navigation. So I have added the hover styles in navigation and so that works

Display div on hover

1 Answers1