1

I want to make a div visible, when hovering over an <a> tag on another div. I tried using +, > but none of them worked. Here is the relevant code I used.

The CSS:

.main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  height: 50px;
  padding-left: 40px;
}

.dropdown-1 {
  visibility: hidden;
}

.main a:hover:first-child>.dropdown-1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100px;
  align-items: center;
  background-color: #fff;
  padding-left: 40px;
}
<div class="container">
  <div class="main">
    <a href="#">Shop Now <em class="fa fa-angle-down"></em></a>
    <a href="#">About Us</a>
    <a href="#">Contact</a>
  </div>
  <div class="dropdown-1">
    <a href="#" id="c1">categories <em class="fa fa-angle-down"></em></a>
    <a href="#">New Arrivals</a>
    <a href="#">Trending Now</a>
    <a href="#">Sales & Offers</a>
    <a href="#">Gift Her</a>
  </div>
  <div class="dropdown-2">
    <a href="#">Frocks</a>
    <a href="#">T-Shirts</a>
    <a href="#">Trousers</a>
    <a href="#">Sarees</a>
    <a href="#">Tops</a>
    <a href="#">Office Wear</a>
    <a href="#">Skirts</a>
    <a href="#">Salwar</a>
    <a href="#">Party Dresses</a>
  </div>
</div>

I want to make .dropdown-1 visible, when hovering over <a>shop now<a> which is in .main class. I tried using, .main a:hover:first-child + .dropdown-1 but it didn't work. How to do this?

Kenit
  • 137
  • 1
  • 1
  • 13
  • 1
    Given that you're talking about needing to select back _up_ the DOM tree, I'm relatively sure that you're limited to doing this with JS or with _very_ ugly CSS hacks-- *_or_*, maybe revisit your markup structure and see if you can find a better hierarchy-- since the content in `dropdown-1` is related to/triggered by the "Shop Now" anchor, perhaps they should be siblings or the dropdown should be a child of the container that holds the anchor... – Alexander Nied Jul 02 '21 at 05:27
  • 1
    Alex beat me to it, you could just restructure your drop down 1 and 2 elements and place them inside your MAIN element selector. Then you could use the general sibling selector ~ like `.main a:hover:first-child ~ .dropdown-1`. CSS => ***Cascading Style Sheets***, literally meaning it works from top down in the DOM tree, you just can't target up the DOM out of a parent element. – dale landry Jul 02 '21 at 05:42

0 Answers0