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>

Answer 2

这是与您的问题相同的示例。访问此处并更改您的代码。

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>

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

2 个答案: