How to change parent li color on child ul hover

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

Answers


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>

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>

Need Your Help

How does Pex work

pex

At a low level, how does Pex work?

How to add line breaks to plotly hover labels

r plotly

Is there a way to get plotly to display the hover text on multiple lines/get it to recognize special characters line '\n' in the text?