在儿童悬停时更改父母的CSS

Question

我想在Child元素的悬停时更改父级的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 会突出显示.

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>

Answer 2

正如其他帖子所说,没有父选择器.

这是它应该如何工作:

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

这样做是检查是否li有i与:hover它的状态.如果是这种情况则应用css.不幸的是,这还不支持..