:hover,但不是特定类


88

如何将悬停效果应用于a元素,而不应用于a具有class的元素active

a:hover(not: .active)

似乎缺少某些东西。

Answers:


175

功能标记是on :not(),不是:hover

a:not(.active):hover

如果您喜欢:hover放在第一位,那很好:

a:hover:not(.active)

哪个伪类是第一个或最后一个都没有关系。无论哪种方式,选择器的作用都相同。:hover我倾向于将用户交互伪类放在结构化伪类后面,这恰好是我的个人习惯。


1
请注意,如果您需要在版本9之前支持IE,因为它们似乎不支持not() msdn.microsoft.com/en-us/library/…。如果可以的话,也许可以查看@Mendhak的答案。
SharpC

7

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

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

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

如果您是针对大量受众并希望支持较旧的浏览器,则最好的方法是为和定义样式,.active:hover然后撤消您在其中所做的任何操作a:hover

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.