-1

I want to display an item (container) when hovering on the a tag, like some sort of sub-menu. However I don't know why the CSS display rule doesn't seem to work.

    <a href="#" class="link">LINK</a>
    
    <div>
        <h1>test</h1>
    </div>

    <style>

        div {display: none;}

        a:hover div {display: block;}
        .link:hover div {display: block !important;}

    </style>
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
LoreEatKids
  • 17
  • 4
  • 2
    You need a sibling selector, like `~` or `+` – j08691 Aug 23 '22 at 17:26
  • 1
    There's no `div` that is a descendant of an `a`. That's what `a:hover div` says. You probably want `a:hover + div`. You want to read about [Combinators](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators). – Heretic Monkey Aug 23 '22 at 17:26

1 Answers1

0

The Adjacent sibling combinator would work for this. When seperating selectors by the +, it matches the second selector only if it immediately follows the first selector.

Try adding + between your selectors such as:

div {
  display: none;
}

a:hover div {
  display: block;
}

.link:hover + div {
  display: block !important;
}
<a href="#" class="link">LINK</a>

<div>
  <h1>test</h1>
</div>
Sarah
  • 354
  • 1
  • 12