在孩子悬停时改变父母的CSS

Question

我想在悬停子元素时更改父元素的 css。

 <ul id="main-menu">
        <li>
            <a href="#">
                <i class="fa fa-building-o" aria-hidden="true"></i>
                Private Limited
                <i class="fa fa-caret-down"></i>
            </a>
            <ul class="submenu">
                <li><a href="#0">Company</a></li>
                <li><a href="#0">Contact</a></li>
                <li><a href="#0">Industry</a></li>
            </ul>
        </li></ ul>

我想要的是，如果我将鼠标悬停在 子菜单 的 li 上， 主菜单 的 li 会突出显示。

原文由 WebStarter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如已经提到的，没有父级选择器，但如果您认识到您已经将鼠标悬停在父级上，您可以实现您想要的。

一个粗略的例子：

 #main-menu > li:hover > a
{
  background-color: #F00;
}

#main-menu >  li > .submenu > li:hover
{
  background-color:#00F;
}

 <ul id="main-menu">
  <li>
    <a href="#">
      <i class="fa fa-building-o" aria-hidden="true"></i>
      Private Limited
      <i class="fa fa-caret-down"></i>
    </a>
    <ul class="submenu">
      <li><a href="#0">Company</a>
      </li>
      <li><a href="#0">Contact</a>
      </li>
      <li><a href="#0">Industry</a>
      </li>
    </ul>
  </li>
</ul>

原文由 Jon P 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

正如其他帖子所说，没有父选择器。

这是它应该如何工作：

 li:has(> i:hover) { /* styles to apply to the li tag */ }

它的作用是检查 li 是否有 i 和 :hover 状态。如果是这种情况，它会应用 css。不幸的是，这还不支持..

原文由 Dirk Jan 发布，翻译遵循 CC BY-SA 3.0 许可协议