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状态几乎总是伴随{{1}国家。

Answer 1

是的，这是预期的行为，

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

<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>

这里的课程首先也与课程项目一起。但是如果我们以错误的顺序声明我们的css而不会给出想要的行为

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

如您所见，将使用最后一个匹配的选择器。它与你的例子相同，没有更多的逻辑， 2个伪类被认为是相等的，因此适用相同的规则最后一次匹配的防守赢了。

修改

伪类是等于的，它是最后定义的胜利！这里有一个证明我的观点的jsFiddle：链接定义之后：hover，：link wins（test）所以，你的声明：悬停覆盖：链接错误，它就像是：active，它的全部一样订单。

Answer 2

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

如果您说明正确的操作顺序，就像下面一样，它可以正常工作。

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

Answer 3

因为在定义:hover后您在第一个代码中定义了:active，所以:hover“覆盖了”:active。在第二种方式中，相反，:active会覆盖:hover。

Answer 4

编辑：

抱歉，我误解了这个问题。

基本上当你处于活动状态（用鼠标指针）时，你实际上也处于悬停状态。因此，基于CSS规则，它将读取样式表中的最后一个。

当您将鼠标悬停在某个链接上并按住鼠标键时如果我们将伪类作为普通类进行操作就是这样的：

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

所以如果你的CSS是

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

它会应用红色

但是如果你的css是

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

它会应用绿色

来自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    */
请注意，A：hover必须放在A：链接和A：访问后规则，因为否则级联规则将隐藏'颜色' A：悬停规则的属性。同样，因为放置了A：active 在A：悬停之后，当用户同时使用活动颜色（石灰）激活并悬停在A元素上。

Answer 5

这是它的工作原理，我会试着解释原因。我们知道CSS在应用样式时会继续搜索文档，并应用最特定于该元素的样式。

示例：

li.betterList { better list styling here }

更具体，会覆盖

li { list styling here }

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

上的说明证实了这一点

注意：：活动必须在：在CSS定义中悬停（如果存在）才能生效！

你也可以把这个CSS扔在你的jsfidle上并观察它是否覆盖，因为它们具有相同的特异性

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

Answer 6

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

声明顺序与伪类有关（请参阅此处：http://reference.sitepoint.com/css/pseudoclasses），因此最终规则优先，与CSS中的其他规则一样。

对于大多数人来说，我认为理想的行为是：

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

由于:active不是那么有用，因此将其遗漏...或与a:link和a:visited合并...然后由a:hover <覆盖< / p>

W3C在这里说出来：

请注意，A：hover必须放在A：链接和A：访问后规则，因为否则级联规则将隐藏'颜色' A：悬停规则的属性。同样，因为放置了A：active 在A：悬停之后，当用户同时使用活动颜色（石灰）激活并悬停在A元素上。

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

即使是W3schools也是如此：

注意：a：hover必须在a：link和a：在CSS中访问   定义为了有效!!

注意：a：主动必须在a之后按顺序悬停在CSS定义中   要有效!!

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

Answer 7

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

通常，

:link一直是默认（未触动），
然后当用户指向该按钮时，那就是:hover发挥作用的地方。
用户指向该链接或按钮后，他/她将点击，即:active进入的位置。

这是我们如何与链接（或按钮）进行交互的标准序列。除:visited之外，其中结果仅在用户先前按下链接时才显而易见。

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

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

a:visited:active {
     color: red;   
}

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

为什么hover伪类会覆盖活动的伪类

7 个答案: