Bei Kind Hover ändern Sie die CSS von Parent

Question

Ich möchte die CSS der Eltern bei Hover von Child-Element ändern.

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

Was ich will, ist, wenn ich auf li von Untermenü, li von Hauptmenü schweben hervorgehoben bekommen.

Answer 1

Wie bereits erwähnt, gibt es keinen Elternselektor, aber wenn Sie erkennen, dass Sie bereits über den Eltern schweben, können Sie erreichen, was Sie wollen.

Ein grobes Beispiel:

#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

Es gibt derzeit keine Möglichkeit, das übergeordnete Element eines Elements in CSS auszuwählen.

Answer 3

Hier können Sie gehen ..

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/)

Answer 4

Wie andere Beiträge sagen, es gibt keine übergeordnete Wähler.

Dies ist, wie es funktionieren soll:

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

Was dies bedeutet, ist zu überprüfen, ob li darin ein i mit :hover Staat hat. Wenn das der Fall ist, wendet es das CSS an. Leider wird dies noch nicht unterstützt.