当鼠标悬停在子元素上时，改变父元素的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

---

无法使用CSS实现。 - Mr_Green

可能是CSS是否有父选择器？的重复问题。 - Mr_Green

@Mr_Green：你能提供一些建议吗？ - WebStarter

你可以使用CSS来实现。我以前就这么做过。但是我现在可以告诉你，如果你使用JavaScript来实现，它会让你的工作变得更加容易。 - GROVER.

@Mr_Green：我正在使用这个来制作导航菜单，在子菜单悬停时需要突出显示主菜单。 - WebStarter

Answer 1

如前所述，CSS中没有父级选择器，但如果您意识到您已经悬停在父元素上，您可以实现您想要的效果。

一个简单的例子：

#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

---

这是真正的交易！谢谢。 - Sorin

Answer 2

目前在CSS中还没有一种方法可以选择元素的父级。

- Demeter Dimitri

Answer 3

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

这应该是其工作方式：

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

这段代码的作用是检查li标签内是否存在带有:hover状态的i标签。如果是，则应用css样式。不幸的是，目前还不支持此功能。

- Dirk Jan

Answer 4

If you want trigger a child element with a child element use this.

.triggerDiv{
  display:none;
}
.child:hover ~.triggerDiv {
  display:block
}

<div class="main">
  <div class="parent">
    <div class="child">
      <p>Hello</p>
    </div>
    <div class="triggerDiv">
      <p>I'm Here</p>
    </div>
  </div>
</div>

- Anıl Şahin

Answer 5

这里可以去...

For Apply CSS..

$("#main-menu li").mouseover(function()
{ 
      $("#main-menu a:eq(0)").css({'color':'blue','font-weight':'bold'});
});

For Remove CSS..

$("#main-menu li").mouseout(function()
{ 
     $("#main-menu a:eq(0)").removeAttr("style");
});

[link] (https://jsfiddle.net/aj23whnb/)

- shivani

---

我觉得你没有理解我的问题，我的问题是当鼠标悬停在子菜单上时，我需要突出显示父菜单。 - WebStarter

我明白你的问题。我在这里放置的代码正是你想要的。请尝试一下。 - shivani

我希望只使用CSS实现它。 - WebStarter

@shivani 如果他想使用 JQuery 实现，他将添加 JQuery 标签，另外你仍然可以部分回答并建议如何使用 JQuery 实现。 - Vinod Srivastav

当然可以使用JS。也许OP需要更明确地说“仅限CSS”，但对大多数人来说这是非常明显的。 - Kalnode