：hover是否有相反的CSS伪类？

Question 1

CSS中是否有伪类可以指定

:not(:hover)

还是这是指定未悬停的项目的唯一方法？

我经历了几个CSS3参考，但没有看到提及CSS伪类来指定：hover的反义词。

Question 2

是的，使用 :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;
}

Question 3

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

例如，只有一些元素可以是-:enabled或:disabled大多数元素都不是，因为语义根本就不适用-但是一个元素只能由定点设备（:hover）或（:not(:hover)）指定。提供可以通过使用直接实现的:not()求反将大大破坏其用途（尽管它仍然可以用来抵消其他任何简单的选择器，也可以否定整个复杂的选择器）。

这样的伪类将在计算上更便宜的论点非常微弱。这种伪类最幼稚的实现是文字:not(:hover)检查，这不会更好。任何更复杂或优化的实现，您都在要求供应商实现一个伪类，该伪类的运行速度甚至快于:not(:hover)，考虑到您具有其他选择，例如级联和:not(:hover)（对于只要无法选择级联），您就可以轻松访问。只是没有理由花费时间和精力来规范，实施和测试至少一种在功能上等效的其他现有方法（至少适用于至少一种现有方法）80％的情况）。还有一个命名这样的伪类的问题-您尚未为其命名，我也想不到一个好名字。:not-hover仅短了两个字节，并且键入的工作量也很少。如果有的话，它可能比更加令人困惑:not(:hover)。

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

如果您担心浏览器的支持，那么这种伪类（如果引入了）很可能是与一起引入的:not()，或者是在后来的Selectors中引入的，因为它没有出现在CSS2中（:hover最初引入已有17年以上），并于一年前在IE4中首次实现）。稍后再引入它是没有意义的，因为:not(:hover)在浏览器无论如何开始实现此新伪类之前，作者将被迫继续使用，并且他们将没有理由进行切换。

请注意，这与以下讨论事件与状态的问题不同（本来是关于:focus而不是的:hover，但原理相同）：CSS是否具有：blur选择器（伪类）？

Question 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

Question 5

a {
  /*styles*/
}

是正常的（非悬停链接）

a:hover {
  /*styles*/
}

是一个悬停的链接