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>