Sass - 将鼠标悬停在子元素上时样式父？

Question

我对 Sass 比较陌生，所以如果这个问题的答案很简单，我很抱歉。 我正在构建一个导航栏组件，并希望在将鼠标悬停在特定图标（.navbar-links 和 .navbar-title）上时设置整个导航栏（.main-header）的样式。 到目前为止，我已经尝试将 .main-header 元素设置为变量 ($h: &) 以及使用 @at-root 无济于事。 任何和所有的建议将不胜感激。

我正在寻找的行为示例：

.navbar-links:hover

结果是

.main-header{
  background: red;
}

代码：

    <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

您可以使用指针事件：无； 在 header 并将子项设置为指针事件：自动； 所以你可以像这样使用 hover 管理它：

 .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>