如何在孩子ul悬停时更改父母li的颜色

Question

I have a menu structured in the following way, and I'm trying to give the previous li a background change when hovering on the nested li.

<ul class="level0">
   <li class="level1">Nav Item</li>
   <li class="level1">Nav Item</li>
   <ul class="level1">
      <li class="level2">Nav Item</li>
      <li class="level2">Nav Item</li>
      <li class="level2">Nav Item</li>
   </ul>
   <li class="level1">Nav Item</li>
   <li class="level1">Nav Item</li>
</ul>

On ul.level1:hover highlight li.level1

Is this possible with CSS/SASS alone?

Edit: Example Added http://codepen.io/curiouscrusher/pen/avpEbZ?editors=110

Answer 1

You could add a 'parent' class to the parent, and then add a rule for the child, specifically for its parent, not super efficient though:

 nav { .parent{ color:black; } ul:hover{ .parent{ color:red; } } li { padding: .5em 0; &:hover { cursor: pointer; font-weight: bold; } } } 

 <nav> <ul class="level0"> <li class="level1">Nav Item</li> <li class="level1 parent">Make This li Change</li> <ul class="level1"> <li class="level2">When Hovering Here</li> <li class="level2">Nav Item</li> <li class="level2">Nav Item</li> </ul> <li class="level1">Nav Item</li> <li class="level1">Nav Item</li> </ul> </nav> 

Answer 2

here is a sample same as your problem. visit here and change your code.

DEMO

 nav ul.level0 li{ color: #000000; } nav ul.level0 ul.level1 li.level2{ color: #78AB46; } nav ul.level0 li.level1 span { color: #000000; } nav ul.level0 ul.level1 .level2:hover,nav ul.level0 ul.level1:hover> li:first-child,nav ul.level0 ul.level1 .level2:hover>li.level1 span { color:blue; } 

  <nav> <ul class="level0"> <li class="level1">Nav Item</li> <ul class="level1"> <li class="level2">When Hovering Here</li> <li class="level2">Nav Item</li> <li class="level2">Nav Item</li> </ul> <li class="level1">Nav Item</li> <li class="level1">Nav Item</li> </ul> </nav>