0

I am trying to affect a sibling element when another element is hovered.
I find this works when I use classes instead, but doesn't when I used IDs. Can someone explain why it works with classes and not IDs

header #Main .Second {
  display: none;
}

.First:hover+.Second {
  display: block;
}
<header>
  <div id="Main">
    <div class="First">
      <img src="Image-Here">
    </div>

    <div class="Second">
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </div>
</header>

When I change the id="Main" to class="Main" the effect I want happens

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – Pete Aug 17 '22 at 15:04
  • If you were to change the second selector to `#Main .First:Hover + .Second` it would work. – Heretic Monkey Aug 17 '22 at 15:07
  • @HereticMonkey isn't that basically the same as `.First:hover + .Second` just more specific? Anywho, when I was experimenting with different ways of doing it it wasn't working when I used ID instead of classes –  Aug 17 '22 at 17:46
  • 1
    "just more specific" well, as @Pete points out, that's the whole problem. IDs are more specific than classes, so your second selector (using classes) doesn't override the first (using IDs). – Heretic Monkey Aug 17 '22 at 18:07

0 Answers0