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

Is there a pseudo-class in CSS to specify 

:not(:hover)

Or is that the only way to specify an item that is not being hovered?

I went through several CSS3 references, and I see no mention of a CSS pseudo-class to specify the opposite of :hover.

115992 次浏览
小开 
a {
/*styles*/
}

是一个正常的(非悬浮链接)

a:hover {
/*styles*/
}

是一个悬浮链接

小开
最佳答案

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

Otherwise... simply use the default logic:

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

没有这样的伪类。当你只需要使用 :not(:hover)的时候，就不需要有。:not()伪类的全部意义在于允许作者编写否定式，而不必为每个现有的(和未来的)动态伪类指定单独的否定式，其中元素只能匹配或不匹配伪类。

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

认为这样一个伪类在计算上更便宜的观点相当站不住脚。这样一个伪类的最简单的实现就是字面 :not(:hover)检查，这也没有什么好处。任何更复杂或优化的实现，你都要求供应商实现一个伪类，它的速度要么和 :not(:hover)一样快，要么甚至比 :not(:hover)还要快。考虑到其他的选项，比如级联和 :not(:hover)(当不能选择级联的时候) ，这种情况在用例中已经不常见了。它只是不能证明需要花费时间和精力来规范、实现和测试至少一种功能等同于100% 的其他现有方法(一种适用于 至少80% 场景的方法)的替代方法。还有一个命名这样一个伪类的问题ーー您还没有为它提出一个名称，我也想不出一个好的名称。:not-hover只短了两个字节，输入的工作量也只是略少一些。如果有什么区别的话，那就是 更多比 :not(:hover)更容易混淆。

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

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

请注意，这与下面的问题不同，后者讨论的是事件与状态的关系(它最初是关于 :focus而不是 :hover的，但同样的原则适用) : CSS 有一个: 模糊选择器(伪类)吗？

小开

If you want to display something only on hovering on something else, u can use

selector:not(:hover)

像这样:

section{
font-size:3em;
}


div:not(:hover) + section{
display:none;
}
<div>Hover on me</div>


<section>Peek A Boo!</section>

There are several unusual effects and outcomes when using :not() that you should keep in mind:

  • :not(:not(...))，:not(p::before)是不可能的
  • :not(*) would obviously never be applied
  • :not(.foo)将匹配任何不是 .foo的内容，包括 <HTML>和 <body>等标记
  • 增加了规则的特异性，例如: #foo:not(#bar)与较简单的 #foo相匹配，但具有较高的特异性。

与 :not的 and操作:

  • 非 <div>和非 <span>元素的元素: body :not(div):not(span){}

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

  • Elements that are not .crazy or .fancy : body :not(.crazy, .fancy){}

来源 MDN


提交答案