Sass - Style parent when hovering on child element?

Question

I am relatively new to Sass so apologies if the answer to this question is straightforward. I am building a navbar component and would like to style the entire navbar (.main-header) when hovering over specific icons (.navbar-links and.navbar-title). So far, I have tried setting the.main-header element to a variable ($h: &) as well as using @at-root to no avail. Any and all suggestions would be much appreciated.

Example of the behavior I am looking for:

.navbar-links:hover

results in

.main-header{
  background: red;
}

code:

    <nav className='main-header'>
        <div className='navbar-title'>
            <a href='/blog/home'>
                <h2 className='navbar-title-text'>REVIEWS</h2>
            </a>
        </div>
        <ul className='navbar-links'>
            <li className='navbar-item'>
                <a href='/blog/home'>
                    <FaHome className='navbar-icon' />
                </a>
            </li>
            <li className='navbar-item'>
                <a href='/blog/television'>
                    <FaTv className='navbar-icon' />
                    <div className='navbar-text'>TELEVISION</div>    
                </a> 
            </li>
        </ul>
    </nav>

Answer 1

You can use pointer-events: none; at the header and set the children to pointer-events: auto; so you can manage it with hover like this:

 .main-header { pointer-events: none; }.main-header:hover { background-color: red; }.navbar-item { pointer-events: auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <nav class='main-header'> <div className='navbar-title'> <a href='/blog/home'> <h2 className='navbar-title-text'>REVIEWS</h2> </a> </div> <ul className='navbar-links'> <li className='navbar-item'> <a href='/blog/home'> <FaHome className='navbar-icon' /> </a> </li> <li class='navbar-item'> <a href='/blog/television'> <FaTv className='navbar-icon' /> <div className='navbar-text'>TELEVISION</div> </a> </li> </ul> </nav>