:hover但:not在特定类上

Question

如何对一个 a 元素应用悬停效果，但不对类为 active 的 a 元素应用悬停效果？

a:hover(not: .active)

似乎有些东西丢失了。

- Jürgen Paul

Answer 1

所使用的是功能符号 :not()，而不是 :hover：

a:not(.active):hover

如果你更喜欢先放置:hover，那也可以：

a:hover:not(.active)

伪类的顺序不重要，无论先后顺序如何，选择器的工作方式都是相同的。只是我的个人习惯是将:hover放在最后，因为我倾向于将用户交互伪类排在结构伪类之后。

- BoltClock

---

如果你需要支持IE 9之前的版本，请注意，因为它们似乎不支持not() https://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#pseudoclasses。如果确实需要支持，请参考@Mendhak的答案。 - SharpC

Answer 2

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

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

然而，这种方法可能无法在所有浏览器中起作用，因为并非所有浏览器都实现了CSS3功能。

如果你的目标是面向大众并希望支持旧版本浏览器，最好的方法是为.active:hover定义一个样式，并撤销a:hover的任何操作。

- Mendhak

Answer 3

我们可以像下面的例子一样，在:hover时使用:not()运算符。

当我们不想将:hover效果应用于所选项目时，可以使用这个操作符。

.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>

- Rohit Tagadiya