是否有一个与:hover相反的CSS伪类？

Question

是否有一个与:hover相反的CSS伪类？

138

在CSS中有没有伪类可以指定

:not(:hover)

还是说那是唯一的指定未被悬停项目的方式吗？

我查阅了几个CSS3参考资料，没有提到用CSS伪类来指定与:hover相反的状态。

- RockPaperLz- Mask it or Casket

1

请使用 element 替换 element:not(:hover)。 - lmgonzalves

7

那样不行，会强制悬停和非悬停状态下的样式都一样。 - RockPaperLz- Mask it or Casket

为什么不使用:not(:hover)？ - Oriol

@Oriol 因为它不像非否定伪类那样简洁，而且它可能比专门设计用于此目的的伪类在计算上更昂贵。 - RockPaperLz- Mask it or Casket

4个回答

4

没有这样的伪类。其实也不需要，因为你可以直接使用:not(:hover)。 :not()伪类的整个意义在于允许作者编写否定语句，而无需指定每个现有（和未来）动态伪类的单独否定语句，其中元素只能匹配或不匹配伪类。

例如，只有一些元素可以是:enabled或:disabled - 大多数元素都是无法应用，因为语义根本不适用 - 但元素只能通过指针设备（:hover）指定，或者不指定（:not(:hover)）。提供已经可以直接使用:not()实现的否定语句将极大地削弱它的实用性（尽管它仍然可以用于否定任何其他简单选择器 - 或沿途的整个复杂选择器）。

认为这样的伪类计算成本较低的论点非常薄弱。这种伪类的最简单实现将是文字上的:not(:hover)检查，这并没有什么好处。任何更复杂或优化的实现都要求供应商实现一个与:not(:hover)一样快甚至更快的伪类，这已经是一个不常见的用例，考虑到您可以轻松获得其他选项，如级联和:not(:hover)（每当级联不可行时）。这根本不能证明将时间和精力用于规范化、实现和测试至少另一种完全等效的现有方法（适用于至少80％的情况之一）的替代方案。还有命名这种伪类的问题 - 您没有为其提出名称，我也想不出好的名称。 :not-hover仅比:not(:hover)短两个字节，键入的工作量仅略微减少。如果说有什么，它可能会比:not(:hover)更加令人困惑。

如果你担心特异性，请注意 :not()伪类本身不计算特异性；只有它最具体的参数才能计算。 :not(:hover)和:hover的特异性相同。所以特异性也不是问题。

如果你担心浏览器支持的问题，那么这种伪类很可能会在:not()一起被引入，或者在后续版本的选择器中引入，因为它没有出现在CSS2中（在那之前，:hover已经首次引入了17年，并在IE4中又实现了1年）。在后面的版本中引入它是没意义的，因为作者仍然只能强制使用:not(:hover)，直到浏览器开始实现这个新的伪类，他们才有理由切换。

请注意，这与下面的问题不同，后者讨论事件与状态（最初关于:focus而不是:hover，但同样适用相同的原则）：CSS是否具有模糊选择器（伪类）？

- BoltClock

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相同的元素匹配，但具有更高的特异性。

:not的and操作：

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

:not的or操作，目前支持性不佳：

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

来源MDN

- Aditya Patnaik

0

a {
  /*styles*/
}

这是一个正常（未悬停的链接）

a:hover {
  /*styles*/
}

是一个被悬停的链接

- nikola_wd

2

这不是很准确的。第一个样式将为项目设置样式，无论鼠标悬停与否，除非也指定了第二个样式。无论如何，第一个样式都会在两种状态下应用，而第二个样式只会在其中一种状态下覆盖它。 - RockPaperLz- Mask it or Casket

你说得对。但这就是它的实现方式，也是使用CSS的唯一方法。你实际上想要实现什么？ - nikola_wd

谢谢。我在上面的主要问题部分添加了一个回复评论，因为另一个SO用户问了同样的问题。 - RockPaperLz- Mask it or Casket

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

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