:悬停但是:不在特定的课程上

Question

如何对a元素应用悬停效果,但不对a类的元素应用active？

a:hover(not: .active)

似乎缺少某些东西.

Answer 1

功能符号打开:not(),而不是:hover:

a:not(.active):hover

如果你想先放:hover,那很好:

a:hover:not(.active)

哪个伪类首先出现或最后出现并不重要; 无论哪种方式,选择器都是一样的.它恰好是我的个人约定,:hover因为我倾向于将用户交互伪类置于结构伪类之后.

Answer 2

我们可以 :not() 在悬停时使用运算符，如下例所示。

当我们不想将:hover效果应用于所选内容时，可以使用此选项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>

Answer 3

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

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

但是,这可能不适用于所有浏览器,因为并非所有浏览器都实现CSS3功能.

如果您要定位大量受众并希望支持较旧的浏览器,那么最好的方法是为您定义一个样式.active:hover并撤消您正在做的任何内容a:hover.