0

I am trying to highlight the list items upon hover over except the first one.

This is the 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>
  ...

This does NOT work:

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

This works BUT it also applies to the first one which I do not want:

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

Thanks

Crocodile
  • 5,724
  • 11
  • 41
  • 67

1 Answers1

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

jsFiddle

Or simpler:

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

jsFiddle

EDIT: If you want highlight all li that has .noactive you shoud apply :hover on ul (.topmenulist):

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

jsFiddle

Shaddow
  • 3,175
  • 3
  • 22
  • 42
  • you can also use: `a.notactive` as shown in the code above and this is not really an answer because he wants to highlight the list-items. – Biketire Jun 23 '13 at 10:55
  • Thanks this works, but I was thinking how can I highlight the actual li tag instead of the a tag (like with ".topmenulist li:hover")? – Crocodile Jun 23 '13 at 11:21
  • 2
    @Crocodile - its impossible highlight parent of child ... you shoud move `active` and `noactive` classes to `li` and then you can: `.topmenulist:hover li.noactive` – Shaddow Jun 23 '13 at 11:35
  • Thanks @Shaddow, eventually I moved the .active class to the li tag and ended up using .topmenulist li:not(.active):hover , but you lead me to the answer. – Crocodile Jun 24 '13 at 05:26