是否有与 :hover 相反的 CSS 伪 class？

Question

CSS中是否有伪class来指定

:not(:hover)

或者这是指定未被悬停的项目的唯一方法吗？

我浏览了几个 CSS3 参考资料，但我没有看到 CSS 伪 class 来指定 :hover.

的对立面

Answer 1

a {
  /*styles*/
}

正常（非悬停link）

a:hover {
  /*styles*/
}

悬停link

Answer 2

是，使用:not(:hover)

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

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

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

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

另一个例子；我想你想：“当一个元素悬停时，使所有其他元素变暗”。

如果我的假设是正确的，并且假设您所有的选择器都在同一父级中：

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

没有这样的伪class。不需要，只要使用 :not(:hover) 即可。 :not() pseudo-class 的全部要点是允许作者编写否定，而不必为每个现有的（和未来的）动态 pseudo-class 指定单独的否定，其中元素只能匹配或不匹配伪class.

例如，只有一些元素可以是 :enabled 或 :disabled — 大多数元素都不是因为语义根本不适用 — 但是元素只能由定点设备指定 (:hover)，或不指定 (:not(:hover))。提供已经可以使用 :not() 直接实现的否定会极大地破坏它的实用性（尽管它仍然可以用来否定任何其他简单的选择器——或者 entire complex selectors 在路上）。

关于这种伪class 计算成本更低的论点是非常站不住脚的。这种伪 class 最天真的实现是文字 :not(:hover) 检查，这也好不到哪里去。任何更复杂或优化的实现，你要求供应商实现一个伪 class，它与 :not(:hover) 一样快，甚至更快，考虑到另一个用例，这已经很不常见了您可以轻松访问的选项，例如级联和 :not(:hover)（当级联不是一个选项时）。它根本没有证明花时间和精力来规范、实施和测试至少一种其他现有方法的替代方法是 100% 功能等效的（并且适用于至少 80 % 的情景）。还有这样一个伪class的命名问题——你还没有给它起名字，我也想不出一个好的名字。 :not-hover 仅缩短了两个字节，并且键入的工作量也仅略微减少。如果有的话，它可能比 :not(:hover).

更令人困惑

如果您担心特异性，请注意 the :not() pseudo-class itself is not counted for specificity; only its most specific argument is。 :not(:hover) 和 :hover 同样具体。所以特异性也不是问题。

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

请注意，这与以下讨论事件与状态的问题不同（最初是关于 :focus 而不是 :hover，但适用相同的原则）：Does CSS have a :blur selector (pseudo-class)?

Answer 4

如果你只想在悬停在其他东西上时显示一些东西，你可以使用

selector:not(:hover)

像这样：

section{
   font-size:3em;
}

div:not(:hover) + section{
 display:none;
}

<div>Hover on me</div>

<section>Peek A Boo!</section>

在使用 :not() 时，有几个 不寻常的效果 和结果需要牢记：

:not(:not(...)),:not(p::before)不可能
:not(*) 显然永远不会被应用
:not(.foo) 将匹配任何非 .foo 的内容，包括 <HTML> 和 <body>
增加规则的特异性，例如：#foo:not(#bar) 将匹配与更简单的 #foo 相同的元素，但具有更高的特异性。

and 与 :not 的运算：

不是 <div> 且不是 <span> 元素的元素： body :not(div):not(span){}

or 与 :not 的操作，目前还没有得到很好的支持。

不是 .crazy 或 .fancy 的元素：body :not(.crazy, .fancy){}

来源MDN

是否有与 :hover 相反的 CSS 伪 class？

Is there an opposite CSS pseudo-class to :hover?

css

hover

css-selectors

pseudo-class