是否有与 :hover 相对的 CSS 伪类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30835168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there an opposite CSS pseudo-class to :hover?
提问by RockPaperLizard
Is there a pseudo-class in CSS to specify
CSS中是否有伪类来指定
: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.
我浏览了几个 CSS3 参考文献，但我没有看到任何用于指定 :hover 反面的 CSS 伪类。
回答by Roko C. Buljan
Yes, use :not(:hover)
是的，使用 :not(:hover)
.child:not(:hover){
opacity: 0.3;
}
Another example; I think you want to: "when one is hovered, dim all other elements".
另一个例子; 我想你想：“当一个悬停时，调暗所有其他元素”。
If my assumption is correct, and assuming all your selectors are inside the same parent:
如果我的假设是正确的，并且假设您的所有选择器都在同一个父级中：
.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;
}
回答by BoltClock
There isn't such a pseudo-class. There doesn't need to be, when you can just use :not(:hover). The whole point of the :not()pseudo-class is to allow authors to write negations without having to specify separate negations of every existing (and future) dynamic pseudo-class where an element can only either match or not match the pseudo-class.
没有这样的伪类。没有必要，当您可以使用:not(:hover). :not()伪类的全部意义在于允许作者编写否定，而不必为每个现有（和未来）动态伪类指定单独的否定，其中元素只能匹配或不匹配伪类。
For example, only some elements can either be :enabledor :disabled— most elements are neitherbecause the semantics simply don't apply — but an element can only either be designated by the pointing device (:hover), or not (:not(:hover)). Providing negations that can already directly be achieved using :not()would greatly undermine its usefulness (though it could still be used to negate any other simple selector — or entire complex selectorsdown the road).
例如，只有某些元素可以是:enabled或:disabled——大多数元素都不是，因为语义根本不适用——但一个元素只能由指点设备指定 ( :hover) 或不指定 ( :not(:hover))。提供已经可以直接使用的否定:not()会极大地削弱它的实用性（尽管它仍然可以用来否定任何其他简单的选择器——或者整个复杂的选择器）。
The argument that such a pseudo-class would be computationally less expensive is pretty weak. The most na?ve implementation of such a pseudo-class would be a literal :not(:hover)check, which would be no better. Any more complex or optimized implementations and you're asking vendors to implement a pseudo-class that is either as fast as or even faster than :not(:hover), something that's already uncommon enough of a use case considering the other options you have such as cascading and :not(:hover)(for whenever cascading isn't an option) that you readily have access to. It simply doesn't justify the time and effort to spec, implement and test an alternative to at least one other existing method that is 100% functionally equivalent (and one that applies to at least80% of scenarios). And there's also the issue of naming such a pseudo-class — you haven't proposed a name for it, and I can't think of a good one either. :not-hoveris only shorter by two bytes and only marginally less work to type. If anything, it's potentially moreconfusing than :not(:hover).
这种伪类在计算上成本更低的论点非常薄弱。这种伪类的最简单的实现将是字面:not(:hover)检查，这不会更好。任何更复杂或优化的实现，并且您要求供应商实现与 一样快甚至更快的伪类，:not(:hover)考虑到您拥有的其他选项，例如级联和:not(:hover)（对于级联不是一种选择时），您可以随时访问。它根本不能证明花费时间和精力来规范、实施和测试至少一种其他现有方法的替代方案，该方法在功能上 100% 等效（并且至少适用于80% 的场景）。还有这样一个伪类的命名问题——你没有为它命名，我也想不出一个好的名字。:not-hover只短了两个字节，而且打字的工作也少了一点。如果有的话，它可能更比混淆:not(:hover)。
If you are worried about specificity, note that the :not()pseudo-class itself is not counted for specificity; only its most specific argument is. :not(:hover)and :hoverare equally specific. So specificity is not an issue either.
如果你担心的特殊性，需要注意的是在:not()伪类本身不计入特异性; 只有它最具体的参数是. :not(:hover)并且:hover同样具体。所以特异性也不是问题。
If you are worried about browser support, such a pseudo-class, if introduced, would likely have either been introduced alongside :not(), or in a later level of Selectors, since it didn't appear in CSS2 (where :hoverwas first introduced more than 17 years ago, and first implemented in IE4 another year yet before). Introducing it in a later level would be pointless because authors would simply be forced to continue using :not(:hover)until browsers begin implementing this new pseudo-class anyway, and they would have no reason to switch.
如果您担心浏览器支持，这样的伪类（如果引入）可能会与 一起引入:not()，或者在更高级别的选择器中引入，因为它没有出现在 CSS2 中（:hover首次引入超过 17 年）之前，并在一年前首次在 IE4 中实现）。在以后的级别引入它是没有意义的，因为作者只会被迫继续使用，:not(:hover)直到浏览器开始实现这个新的伪类，而且他们没有理由切换。
Note that this isn't the same as the following question, which talks about events vs states (it's originally about :focusrather than :hover, but the same principle applies): Does CSS have a :blur selector (pseudo-class)?
请注意，这与以下讨论事件与状态的问题不同（它最初是关于:focus而不是:hover，但适用相同的原则）：CSS 是否有 :blur 选择器（伪类）？
回答by nikola_wd
a {
/*styles*/
}
is a normal (non hovered link)
是正常的（非悬停链接）
a:hover {
/*styles*/
}
is a hovered link
是一个悬停链接
