:hover but :not on a specific class

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.

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.

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.

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>