: hover but: 不在特定类上

小开

最佳答案

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

a:not(.active):hover

如果你喜欢把 :hover放在第一位，那也没关系:

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.

小开

您可以选择使用 not()选择器。

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

但是，这可能不适用于所有浏览器，因为并非所有浏览器都实现了 CSS3特性。

如果您的目标客户群很大，并且希望支持较老的浏览器，那么最好的方法是为 .active:hover定义一种样式，并撤消您在 a:hover中所做的任何操作。

小开

我们可以像下面的例子一样使用 :not() < strong > 悬停运算符。

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>