如何覆盖CSS：hover？ [英] How to override CSS :hover?

问题描述

所以我有这个：

 < ul> 
< li>第1行< / li> 
< li class =disabled>第2行< / li> 
< / ul> 
  

对应的CSS是：

  ul li：hover {
 color：red; 
} 
  

这样可以让'li's' 。但是如果我想要其中一个是禁用，我会使用以下：

  .disabled {
颜色：灰色
} 
  

但是其他CSS代码的'hover'伪类仍然。

解决方案

第一个规则会覆盖它，因为CSS的特性， / p>

http：//www.htmldog.com/guides/cssadvanced / specific /

将第二条规则更改为：

  ul li.disabled，ul li.disabled：hover {
 color：gray; 
} 
  

So I have this:

<ul>
    <li>Line 1</li>
    <li class="disabled">Line 2</li>
</ul>

And the corresponding CSS is:

ul li:hover{
    color:red;
}

This allows for both 'li's' to be hovered over and have their color changed. But if I want one of them to be 'disabled', I'd use the following:

.disabled{
    color:grey;
}

But the other CSS code's 'hover' pseudo-class still kicks in... Any way I can override this?

解决方案

The first rule overrides it because off CSS specificty, that is it's more specific.

http://www.htmldog.com/guides/cssadvanced/specificity/

Change second rule to:

ul li.disabled, ul li.disabled:hover{
    color:grey;
}

这篇关于如何覆盖CSS：hover？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！