:hover 但 :not 在特定的类上

Posted 2023-03-06

【中文标题】:hover 但 :not 在特定的类上

【英文标题】：:hover but :not on a specific class

【发布时间】：2012-03-03 17:50:37

【问题描述】：

如何在 a 元素上应用悬停效果，而不是在类 active 的 a 元素上应用悬停效果？

a:hover(not: .active)

好像少了点什么。

【参考方案1】：

函数符号在:not()，而不是:hover：

a:not(.active):hover

如果您更愿意将:hover 放在首位，那很好：

a:hover:not(.active)

哪个伪类先出现或最后出现并不重要；无论哪种方式，选择器的工作方式都是一样的。将:hover 放在最后只是我个人的惯例，因为我倾向于将用户交互伪类放在结构伪类之后。

【讨论】：

如果您需要在版本 9 之前支持 IE，请小心，因为它们似乎不支持 not() msdn.microsoft.com/en-us/library/…。如果你这样做，也许可以看到@Mendhak 的答案。

【参考方案2】：

您可以选择使用not() 选择器。

a:not(.active):hover  ... 

但是，这可能不适用于所有浏览器，因为并非所有浏览器都实现 CSS3 功能。

如果您面向大量受众并希望支持旧版浏览器，最好的方法是为 .active:hover 定义样式并撤消您在 a:hover 中所做的任何事情。

【参考方案3】：

我们可以使用 :not() 悬停运算符，如下例所示。

当我们不想对选中的item 应用:hover 效果时可以使用它

.block-wraper 
  display: flex;


.block 
  width: 50px;
  height: 50px;
  border-radius: 3px;
  border: 1px solid;
  margin: 0px 5px;
  cursor: pointer;


.active 
  background: #0095ff;


.block:not(.active):hover 
  background: #b6e1ff;

<div class="block-wraper">
  <div class="block"></div>
  <div class="block active"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>