css - 如果它属于两个类，则将悬停应用于无序列表项

Question

除了第一个，我试图在悬停时突出显示列表项。

这是 html:

  ...
  <ul class="topmenulist">
  <li><a href="#" class="active" >Home</a></li>
  <li><a href="#" class="notactive" >What we do</a></li>
  <li><a href="#" class="notactive" >Projects</a></li>
  <li><a href="#" class="notactive" >Contact</a></li>
  </ul>
  ...

这不起作用:

  .notactive.topmenulist li:hover{ 
  background-color: #EAEAEA;
  }

这有效，但它也适用于我不想要的第一个:

  .topmenulist li:hover{ 
  background-color: #EAEAEA;
   }

谢谢

Answer 1

.topmenulist li:hover a:not(.active) {
    background-color: #EAEAEA;
}

jsFiddle

或者更简单:

.topmenulist li:hover a.notactive {
    background-color: #EAEAEA;
}

jsFiddle

编辑:如果您想突出显示所有 li有 .noactive你应该申请:hover在 ul ( .topmenulist ):

.topmenulist:hover li a.notactive {
    background-color: #EAEAEA;
}

jsFiddle