Html 在子悬停时更改 Parent 的 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37959686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
On child hover change the css of Parent
提问by WebStarter
I want to change the css of parent on hover of Child element.
我想在 Child 元素悬停时更改 parent 的 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>
What i want is if i hover on li of submenu, li of main-menuget highlighted.
我想要的是，如果我将鼠标悬停在子菜单的li 上，主菜单的li会突出显示。
回答by Jon P
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.
如前所述，没有父选择器，但如果您认识到您已经将鼠标悬停在父选择器上，则可以实现您想要的。
A rough example:
一个粗略的例子：
#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>回答by djl
As other posts say there is no parent selector.
正如其他帖子所说，没有父选择器。
This is how it should work:
这是它应该如何工作：
li:has(> i:hover) { /* styles to apply to the li tag */ }
What this does is check if lihas a iwith :hoverstate in it. If that's the case it applies the css. Unfortunately this is not supported yet..
这样做是检查其中是否li有iwith:hover状态。如果是这种情况，它会应用 css。不幸的是，这还不支持..
回答by Demeter Dimitri
There is currently no way to select the parent of an element in CSS.
目前没有办法在 CSS 中选择元素的父级。
回答by An?l ?ahin
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>回答by shivani
Here you can go..
在这里你可以去..
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/)
[链接] ( https://jsfiddle.net/aj23whnb/)
