Question

CSS中是否有伪类来指定

:not(:hover)

或者这是指定一个没有悬停的物品的唯一方法吗？

我经历了几个CSS3引用，我没有提到CSS伪类来指定相反的：hover。

Answer 1

是的，请使用:not(:hover)

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

<强> jsBin demo

另一个例子;我想你想：＆＃34;当一个人徘徊时，忽略所有其他元素＆＃34; 。

如果我的假设是正确的，并假设你的所有选择器都在同一个父母中：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

.child{
   opacity: 0.2;       // Yey, not hovered!
}
.child:hover{
   opacity: 1;         // ME! ME! ME!
}

Answer 2

没有这样的伪类。当你可以使用:not(:hover)时，不需要。 :not()伪类的重点是允许作者写入否定而不必指定对每个现有（和将来）动态伪类的单独否定，其中元素只能匹配或不匹配伪 - 类。

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

这种伪类在计算上更便宜的论点相当薄弱。这种伪类的最天真的实现是文字:not(:hover)检查，这不会更好。任何更复杂或优化的实现，并且您要求供应商实现一个与:not(:hover)一样快或甚至更快的伪类，考虑到您拥有的其他选项，这个用例已经不常见了。作为级联和:not(:hover)（对于任何级联都不是一个选项）你可以随时访问。它只是没有理由花时间和精力来规划，实现和测试至少一种100％功能等同的现有方法的替代方案（并且适用于至少 80％的方案的方法））。还有一个命名这样一个伪类的问题 - 你没有为它提出一个名字，我也想不出一个好的名字。 :not-hover只缩短了两个字节，输入的工作量略少。如果有的话，它可能更多比:not(:hover)更令人困惑。

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

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

请注意，这与以下问题不同，后者讨论事件与状态（最初约为:focus而不是:hover，但同样的原则适用）：{{3} }

Answer 3

如果您只想将鼠标悬停在其他地方，则可以使用

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

Answer 4

git remote add origin

是正常（非悬停链接）

a {
  /*styles*/
}

是一个悬停的链接

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

4 个答案: