Html 在子鼠标悬停时更改父对象的css

我想在子元素悬停时更改父元素的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将突出显示。

当前无法选择CSS中某个元素的父元素。

您可以点击这里

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");
});

[连结]

---

（）

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

这就是它的工作原理：

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

---

这样做的目的是检查

li

是否有

i

和

：hover

状态。如果是这种情况，它将应用css。不幸的是，这还不受支持。

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

一个粗略的例子：

#主菜单>li:hover>a
{
背景色：#F00；
}
#主菜单>li>。子菜单>li:悬停
{
背景色：#00F；
}

如果要使用子元素触发子元素，请使用此选项。

.triggerDiv{
显示：无；
}
.child:hover~.triggerDiv{
显示：块
}

你好

我在这里

不可能使用cssImplement jQuery.：）@CaelanGrgurovic可能重复：我想用css试试only@Mr_Green当前位置你能提出一些建议吗？我想你还没有明白我的问题，我的问题是我必须突出显示子菜单悬停处的父菜单。我明白你的问题。我放在这里的代码正是你想要的。请尝试我想要它使用CSSonly@shivani如果他想用JQuery做这件事，他会添加JQuery标记，而且你仍然可以回答部分问题，建议如何用JQuery做。当然，你可以使用JS。也许OP必须更明确地说“仅CSS”，但这对大多数人来说是显而易见的。这才是真正的交易！谢谢