127

How do I apply a hover effect on an a element, but not to an a element with the class active?

a:hover(not: .active)

Seems something is missing.

3 Answers 3

245

The functional notation is on :not(), not :hover:

a:not(.active):hover

If you prefer to put :hover first, that's fine:

a:hover:not(.active)

It doesn't matter which pseudo-class comes first or last; either way, the selector works the same. It just happens to be my personal convention to put :hover last as I tend to place user-interaction pseudo-classes behind structural pseudo-classes.

1
  • 1
    Be careful if you need to support IE before version 9 though as they appear to not support not() msdn.microsoft.com/en-us/library/…. Perhaps see the answer by @Mendhak if you do.
    – SharpC
    Jun 12, 2017 at 7:47
12

You have the option of using the not() selector.

a:not(.active):hover { ... }

However, this may not work in all browsers, as not all browsers implement CSS3 features.

If you are targeting a large audience and want to support older browsers, the best way would be to define a style for the .active:hover and undo whatever you're doing in a:hover.

9

We can use :not() operator on hover like below example.

We can use this when we don't want to apply :hover effect to the selected item

.block-wraper {
  display: flex;
}

.block {
  width: 50px;
  height: 50px;
  border-radius: 3px;
  border: 1px solid;
  margin: 0px 5px;
  cursor: pointer;
}

.active {
  background: #0095ff;
}

.block:not(.active):hover {
  background: #b6e1ff;
}
<div class="block-wraper">
  <div class="block"></div>
  <div class="block active"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.