如何在子 ul 悬停时更改父 li 颜色答案

【问题标题】：How to change parent li color on child ul hover如何在子 ul 悬停时更改父 li 颜色
【发布时间】：2015-09-30 14:43:00
【问题描述】：

我有一个按以下方式构建的菜单，当悬停在嵌套的 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

【问题讨论】：

可以分享演示链接吗？
好的，上面加了一个codepen
添加ul:hover > li:first-child {background:somecolor}

标签： html css navigation

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：