:hover Not Working in Basic Layout. On Hover to Display Adjacent Div

Question

I'm trying to make a div visible when the user hovers over an adjacent div but it is not working for some reason. The navigation-links is the hovered object, while the navigation-links-dropdown is the object to be made visible when the user hovers over the navigation-links. The format is like so:

.navigation-links-dropdown {
  display: none;
}

.navigation-links:hover~.navigation-links-dropdown {
  display: flex;
}

<div class="wrapper">
  <div class="header">
    <ul class="mobile-list">
      <li>
        <ul class="navigation-links">
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="navigation-links-dropdown">
            <ul>Link List 1</ul>
            <ul>Link List 2</ul>
            <ul>Link List 3</ul>
        </div>
    </div>

`~` is the _general sibling combinator_. But `.navigation-links` and `.navigation-links-dropdown` are not siblings. — CBroe, May 31 '22 at 12:23
Is the missing `"` in the navigation-links-dropdown deliberate? — m4n0, May 31 '22 at 12:23
how can the structure change so that this could be possible with only CSS? — All_Semicolons, May 31 '22 at 12:26
Not possible, until you can make use of [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) which is not compatible in modern browser currently. — m4n0, May 31 '22 at 12:28
This may helpful to you https://stackoverflow.com/a/6910112/7757119 — Danielprabhakaran N, May 31 '22 at 12:31

score 0 · Answer 1 · answered May 31 '22 at 20:05

So this one html structure that will show you the basics of what you are trying to do and should be enough to get you going.

.navigation-links-dropdown {
  height: 0px;
  opacity: 0;
  transition: all .5s;
}

.navigation-links>li:hover+ul.navigation-links-dropdown {
  height: 70px;
  opacity: 1;
  transition: height 1s, opacity 1s .5s;
}

<div class="wrapper">
  <div class="header">
    <div class="mobile-list">
      <ul class="navigation-links">
        <li>Link 1</li>
        <ul class="navigation-links-dropdown">
          <li>Link List 1</li>
          <li>Link List 2</li>
          <li>Link List 3</li>
        </ul>

        <li>Link 2</li>
        <ul class="navigation-links-dropdown">
          <li>Link List 1</li>
          <li>Link List 2</li>
          <li>Link List 3</li>
        </ul>

        <li>Link 3</li>
        <ul class="navigation-links-dropdown">
          <li>Link List 1</li>
          <li>Link List 2</li>
          <li>Link List 3</li>
        </ul>
      </ul>
    </div>
  </div>
</div>

:hover Not Working in Basic Layout. On Hover to Display Adjacent Div

1 Answers1