是否存在相反的CSS伪类:hover？

Question

是否有CSS中的伪类来指定

:not(:hover)

或者这是指定一个没有悬停的项目的唯一方法？

我经历了几个CSS3引用,我没有提到CSS伪类来指定相反的:hover.

Answer 1

是的,使用 :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

jsBin演示

另一个例子; 我想你想:"当一个人徘徊时,将所有其他元素调暗".

如果我的假设是正确的,并假设您的所有选择器都在同一个父级内:

.parent:hover .child{
    opacity: 0.2;      // Dim all other elements
}
.child:hover{
   opacity: 1;         // Not the hovered one
}

.child{
  display:inline-block;
  background:#000;
  border:1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

.parent:hover .child{
  opacity: 0.3;
}
.parent .child:hover{
  opacity: 1;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

否则......只需使用默认逻辑:

.child{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}

Answer 2

不存在这样的伪类。当您只需使用 . 时就不需要了:not(:hover)。伪类的全部要点:not()是允许作者编写否定，而不必为每个现有（和未来）动态伪类指定单独的否定，其中元素只能匹配或不匹配伪类。

\n\n

例如，只有某些元素可以是\xe2\x80\x94:enabled或\xe2\x80\x94，大多数元素都不是，因为语义根本不适用 \xe2\x80\x94，但元素只能由指针设备 ( ) 指定，或不 （）。提供已经可以直接实现的否定将大大削弱它的实用性（尽管它仍然可以用于否定任何其他简单选择器 \xe2\x80\x94 或整个复杂选择器:disabled:hover:not(:hover):not()）。

\n\n

关于这样的伪类在计算上会更便宜的论点是相当站不住脚的。这种伪类最简单的实现是文字:not(:hover)检查，这也好不到哪儿去。任何更复杂或优化的实现，您都要求供应商实现一个与 一样快甚至更快的伪类:not(:hover)，考虑到您拥有的其他选项，这在用例中已经不常见了，例如级联并且:not(:hover)（当级联不是一个选项时）您可以轻松访问。它根本无法证明花费时间和精力来规范、实施和测试至少一种功能上 100% 等效的其他现有方法（并且适用于至少80% 的场景）的替代方法。还有一个命名这样一个伪类 \xe2\x80\x94 的问题，你还没有为它提出一个名字，我也想不出一个好的名字。:not-hover仅短了两个字节，并且输入工作量也仅略微减少。如果有的话，它可能比:not(:hover).

\n\n

如果您担心特异性，请注意伪:not()类本身不计入特异性；只有它最具体的论点是。:not(:hover)并且:hover同样具体。因此，特异性也不是问题。

\n\n

如果您担心浏览器支持，这样的伪类如果引入，很可能会与:not()选择器一起引入，或者在更高级别的选择器中引入，因为它没有出现在 CSS2 中（:hover首次引入超过 17几年前，并在一年前首次在 IE4 中实现）。在稍后的级别中引入它是没有意义的，因为作者将被迫继续使用，:not(:hover)直到浏览器开始实现这个新的伪类，并且他们没有理由切换。

\n\n

请注意，这与以下讨论事件与状态的问题不同（它最初是关于:focus而不是:hover，但适用相同的原则）：CSS 有一个 :blur 选择器（伪类）吗？

\n