为什么悬浮伪类会覆盖活动伪类 [英] Why does the hover pseudo-class override the active pseudo-class

问题描述

假设我有一个元素，我想在上改变颜色， ：hover ，但单击时，我想要切换回其原始颜色。所以，我试过这个：

  a：link，a：visited，a：active {
 background：红; 
} 
 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 状态。

解决方案

是这是预期的行为，

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

 < 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 {蓝色; } 
 .item {background：red; } 
  

，可以看到，将使用最后一个匹配的选择器。
它和你的例子是一样的，没有什么更多的逻辑，
2个伪类相同，因此相同的规则适用
最后匹配defenition胜利。

编辑

伪类是等于，它是最后定义的那个wins！这里是一个jsFiddle证明了我的观点：link定义后：hover，：链接wins（测试）所以，你的声明：hover overriding：链接是错误的，它只是一样喜欢：活动，其所有的顺序。

The title basically says it all.

Suppose I have an element which I want to change color on :hover, but while clicked, I want it to switch back to its original color. So, I've tried this:

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

As it turns out, this doesn't work. After a lot of head-scratching, I realized that the :hover state was overriding the :active state. This was easily solved by this:

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

(I could combine the 1st rule with the 3rd one).

Here's the fiddle: http://jsfiddle.net/V5FUy/

---

My question: is this the expected behavior? As far as I understand this, the :active state should always override the :hover state, since the :active state will almost always be accompanied with the :hover state.

解决方案

yes this is expected behavior,

lets take a look at another example. just adding two classes,

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

here the class first also comes together with the class item. but if we declare our css in the wrong order that would not give the wanted behavior

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

as you can see, the last matching selector will be used. it is the same as your example, no mather what is more logic, the 2 pseudo-classes are concidered equal, thus the same rules apply the last matching defenition wins.

edit

pseudoclasses are equals, it is the one defined last that wins! here is a jsFiddle that proves my point :link defined after :hover, :link wins (test) so, your statement of :hover overriding :link is wrong, its just the same like with :active, its all about the order.

这篇关于为什么悬浮伪类会覆盖活动伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！