Using :not and :hover

Problem

I'm trying to add a hover effect to all list elements that don't have a class of "active" which I cannot figure out how. I can change it's normal style through the following:

li:not(.active){
padding-bottom:5px;
border-bottom:2px solid #fff;
}

Which works just fine, but I can't seem to get it working for the hover state. I have tried li:not:hover (.active){ and others and it doesn't work for me. Any css-only solutions, would be greatly appreciated!

Problem courtesy of: Z61

Solution

You're not supposed to separate :not() from its argument! Use either li:hover:not(.active) or li:not(.active):hover.

Solution courtesy of: BoltClock

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.