在儿童悬停时更改父母的CSS [英] On child hover change the css of Parent

问题描述

我想在Child元素悬停时更改父级的CSS。

I want to change the css of parent on hover of Child element.

<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上，我想要的是主菜单突出显示。

What i want is if i hover on li of submenu, li of main-menu get highlighted.

推荐答案

如前所述，没有父选择器，但如果您认出你已经在父母身上盘旋，你可以实现你想要的目标。

As already mentioned there is no parent selector but if you recognise that you are already hovering over the parent you can achieve what you want.

一个粗略的例子：

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

这篇关于在儿童悬停时更改父母的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！