提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
我对 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>
您可以使用指针事件：无； 在 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>
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.