0

In the following html, I have an li element with id="currency-dropdown". It's parent is a ul element with class="nav". There is a div element, id="currency", that is the adjacent sibling of the ul element. The div element has the attribute -- visibility:hidden; When the li element is hovered over, how do I target the div element and change its attribute to visibility:visible?

<div class="col-12  col-md-4" id="header-top-right-area">
    <ul class="nav">
        <li class="nav-item" id="currency-dropdown">
            <a href="#" class="nav-link active">
                USD <i class="fa fa-chevron-down"></i>
            </a>
        </li>        
    </ul>
    <div id="currency" class="dropdown">
        <ul class="list-unstyled">
            <li>EURO</li>
        </ul>
    </div>
</div>

Skeletal scss:

.nav {
    #currency-dropdown {
        &:hover {
           //When hovered over, changed #currency to visible:visible
        }    
    }                          
}

#currency {
    visibility:hidden;
}
koque
  • 1,830
  • 5
  • 28
  • 49
  • you cannot, the missing piece of this puzzle is a parent selector – Temani Afif Mar 05 '19 at 19:20
  • @Temani The answer you are referring to is from 9 years ago. Surely by now a solution to this would have been created in CSS. Could you leave my question active. – koque Mar 05 '19 at 19:26
  • no, there is still no solution yet, only JS can help you (you find some solutions in the duplicate) – Temani Afif Mar 05 '19 at 19:26
  • You may rethink your HTML structure to be able to use the ~ selector. What is the layout suppose to look alike , how many `li` and `div` or currency do you have to show ? (rethink structure why ? .Your content should make sense without CSS because this how search engines and screen readers see it ) – G-Cyrillus Mar 05 '19 at 19:40

0 Answers0