html - 为什么悬停伪类会覆盖活动伪类

Question

标题基本上说明了一切。

假设我有一个想要更改颜色的元素:hover，但是在单击时，我希望它切换回原来的颜色。所以，我试过这个：

a:link, a:visited, a:active {
    background: red;
}
a:hover {
    background: green;
}

事实证明，这是行不通的。经过一番摸索后，我意识到:hover国家正在压倒:active国家。这很容易解决：

a:link, a:visited {
    background: green;
}
a:hover {
    background: red;
}
a:active {
    background: green;
}

（我可以将第一条规则与第三条规则结合起来）。

这是小提琴：http: //jsfiddle.net/V5FUy/

我的问题：这是预期的行为吗？据我了解，:active国家应该总是凌驾于:hover国家之上，因为:active国家几乎总是伴随着:hover国家。

score 14 · Accepted Answer

是的，这是预期的行为，

让我们看另一个例子。只需添加两个类，

<ul>
<li class="item first">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item last">item</li>
</ul>

这里的 class first 也与 class item 一起出现。但是如果我们以错误的顺序声明我们的 css，则不会给出想要的行为

.first { background: blue; }
.item { background: red; }

如您所见，将使用最后一个匹配的选择器。它与您的示例相同，没有更多的逻辑，这两个伪类被认为是相等的，因此相同的规则适用于最后一个匹配的防御获胜。

编辑

伪类是平等的，它是最后定义的获胜者！这是一个 jsFiddle，它证明了我的观点 :link 在 :hover 之后定义，:link 获胜（测试）所以，你的 :hover 覆盖 :link 的声明是错误的，它和 :active 一样，都是关于顺序的。

score 3 · Accepted Answer

活动状态必须在悬停状态之后声明，在您的 CSS 中，您将活动状态聚集在活动状态之前，因此它不会被触发。

如果您说明它工作的正确操作顺序，如下所示，它工作正常。

a.noworks:link, a.noworks:visited {
    background: red;
}

a.noworks:hover {
    background: green;
}

a.noworks:active {
    background: red;
}

因此，要回答您的问题，是的，这是预期的行为。

以下是操作顺序：

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

score 2 · Accepted Answer

因为在您定义:hover后定义的第一个代码中:active，所以:hover“覆盖” :active。在第二种情况下，它是相反的，:active覆盖:hover.

score 0 · Accepted Answer

我认为您至少应该考虑链接（或按钮）上的用户交互流程。

通常，

:link一直是默认的（未改动），
然后当用户指向按钮时，这就是:hover发挥作用的地方。
一旦用户指向链接或按钮，他/她就会点击，这就是:active进来的地方。

这是我们如何与链接（或按钮）交互的标准顺序。除了:visited，只有在用户之前按下链接时结果才明显。

如果您在处理链接时牢记助记符：' L o V e HA te'，这将非常有帮助（除了:visited，它不适用于按钮）。

但是，如果您真的想进行覆盖，例如，您想更改已在活动状态下访问过的链接的颜色，您可以执行以下操作：

a:visited:active {
     color: red;   
}

但最重要的是，如果没有必要，请避免更改标准顺序。

score 0 · Accepted Answer

EDIT:

Sorry, I misunderstand the question.

Basically when you are in active state (with a mouse pointer) you are actually in hover state too. So based on CSS rules it would read the last one in stylesheet.

When you hover over a link and hold down the mouse key It's like this if we take pseud classes as normal classes :

<a class="active hover"></a>

So if your css was

.active{color:green}
.hover{color:red}

it would apply red

but if your css was

.hover{color:red}
.active{color:green}

It would apply green

From W3C

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */
Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

score 0 · Accepted Answer

这就是它的工作原理，我将尝试解释原因。正如我们所知，CSS 将在应用样式时继续搜索文档并应用最特定于元素的样式。

例子：

li.betterList { better list styling here }

更具体并将覆盖

li { list styling here }

这些 Puesdo 选择器都被认为具有相同的特异性，因此最后一行将覆盖前一行。W3Schools上的说明证实了这一点

注意： :active 必须在 CSS 定义中的 :hover （如果存在）之后才能生效！

你也可以把这个 CSS 放在你的 jsfidle 上，然后看它被覆盖，因为它们具有相同的特性

.works {background: red}
.works {background: green}

score 0 · Accepted Answer

这是预期的行为，因为大多数人总是将:hover伪类放在规则组的末尾。

声明的顺序与伪类有关（在此处查看更多信息：http ://reference.sitepoint.com/css/pseudoclasses ），因此最终规则优先，与 CSS 中的其他规则一样。

对于大多数人来说，我认为期望的行为：

a:link {
  ⋮ declarations
}
a:visited {
  ⋮ declarations
}
a:hover {
  ⋮ declarations
}

由于 the:active不是那么有用，它被忽略了......或与a:linkand结合a:visited......然后它被覆盖a:hover

W3C 在这里详细说明：

注意 A:hover 必须放在 A:link 和 A:visited 规则之后，否则级联规则将隐藏 A:hover 规则的 'color' 属性。同样，因为 A:active 放置在 A:hover 之后，所以当用户激活并将鼠标悬停在 A 元素上时，将应用活动颜色（石灰）。

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

即使是 W3schools 也能做到这一点：

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后才能生效！！

注意：a:active 必须在 CSS 定义中的 a:hover 之后才能生效！！

http://www.w3schools.com/css/css_pseudo_classes.asp

score 0 · Accepted Answer

您可以使用 :not() 选择器让 :active 伪类覆盖 :hover 伪类，而不管声明的顺序如何。

a:link, a:visited, a:active {
    background: red;
}

a:hover:not(:active) {
    background: green;
}

这样， :hover 选择器仅在 :active 选择器不被触发时才被触发。

html - 为什么悬停伪类会覆盖活动伪类

8 回答 8

Related

Reference