CSS如何重置：悬停到默认状态？

Posted 2023-04-14

【中文标题】CSS如何重置：悬停到默认状态？

【英文标题】：how can css reset :hover to default state?

【发布时间】：2012-12-18 17:20:09

【问题描述】：

我有以下规则：

.quiz .panel .choices a:hover,
.quiz .panel .choices a:active background-position: 0 -30px;

而且由于 ios 与 :hover 交互时的怪异记录有据可查。我想将 <a> 标签重置为 iOS 的正常 CSS 状态。在我的页面中，javascript 将在顶层注入一个名为“iOS”的类，因此我将覆盖的以下规则是：

.iOS .quiz .panel .choices a:(?????)

问号是我不知道的部分。我要编写什么 CSS 规则来重置 <a> 标记以使伪类处于默认状态？

【问题讨论】：

我还没有在 iOS 上做过任何实验，但是当你有 .iOS .quiz .panel .choices a background-position: 0 0; 时会发生什么？这不会重置它吗？

是的，我一直在运行测试，你是正确的 Andrew。我将正确答案授予 Ivozor，因为他在几分钟前发布了与您相同的内容

【参考方案1】：

我不太明白你的问题，但你有 4 个选项

a:link
a:hover
a:active
a:visited

我猜你需要

.iOS .quiz .panel .choices a:link background-position: 0 0

【参考方案2】：

根本没有伪类。只需使用：

.iOS .quiz .panel .choices a

当“悬停”没有发生时，它将是选定的规则！ :)

【讨论】：

so .iOS .quiz .panel .choices a 会去掉伪类吗？

我一直在运行测试，这是正确的答案。通过只为 a 标签重写规则，所有的伪类都被删除了。然后就可以写新的了

【参考方案3】：

body:not(.iOS) .quiz .panel .choices a:hover,
.quiz .panel .choices a:active background-position: 0 -30px;

如有必要，对 :active 行重复 not。还可以将body 替换为与您应用.iOS 类的任何元素匹配的选择器。

【讨论】：

（这会替换您现有的行，它不会添加到末尾。）

这是个好主意，但 :not 不是 css3，我需要 :hover 才能为旧版浏览器工作。尽管我想要：悬停以排除 iOS，但您走在正确的轨道上。但我想用覆盖来做到这一点。换句话说，从 标签

中删除 :hover 伪类的规则

:not() 支持除 IE

查看developer.mozilla.org/en-US/docs/CSS/:not底部的兼容性表