html - 如何在子 ul 悬停时更改父 li 颜色

Question

我有一个按以下方式构建的菜单，我试图在将鼠标悬停在嵌套的 li 上时为前一个 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>

在 ul.level1 上:悬停高亮 li.level1

单独使用 CSS/SASS 是否可行？

编辑: 添加示例 http://codepen.io/curiouscrusher/pen/avpEbZ?editors=110

Answer 1

您可以向父类添加一个“父类”，然后为子类添加一个规则，特别是为其父类添加规则，但效率不高:

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>