如果它属于两个类，则将鼠标悬停在无序列表项上

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; } ）上应用{{1}} ：

{{1}}

jsFiddle