如何覆盖 CSS :hover？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7035407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to override CSS :hover?
提问by Abhishek
I have this HTML code:
我有这个 HTML 代码：
<ul>
<li>Line 1</li>
<li class="disabled">Line 2</li>
</ul>
And the corresponding CSS is:
对应的 CSS 是：
ul li:hover {
color: red;
}
This allows for both lis to be hovered over and have their color changed. But if I want one of them to be disabled, I'd use the following:
这允许将两个lis 悬停并改变它们的颜色。但如果我想要其中之一disabled，我会使用以下内容：
.disabled {
color: grey;
}
But the other CSS code's hoverpseudo-class still has effect. Is there any way I can override this?
但是其他 CSS 代码的hover伪类仍然有效。有什么办法可以覆盖它吗？
回答by Ruxta
The first rule overrides it because off CSS specificty, that is it's more specific.
第一条规则覆盖了它，因为 CSS 特殊性，也就是说它更具体。
http://www.htmldog.com/guides/cssadvanced/specificity/
http://www.htmldog.com/guides/cssadvanced/specificity/
Change second rule to:
将第二条规则更改为：
ul li.disabled, ul li.disabled:hover{
color:grey;
}
回答by Jon P
Change your CSS To:
将您的 CSS 更改为：
ul li:hover{
color:red;
}
.disabled ,.disabled:hover{
color:grey;
}
回答by Jon P
You just need to change your css:
你只需要改变你的css：
ul li:hover{ color:red; }
ul li.disabled,ul li.disabled:hover{ color:grey; }
ul li：悬停{颜色：红色；}
ul li.disabled,ul li.disabled:hover{ 颜色:灰色; }
You have to disable the hover effect, so you give it the same color as when it wasn't hovered.
您必须禁用悬停效果，因此您可以为其设置与未悬停时相同的颜色。
回答by hazzik
.disabled{
color:grey !important;
}
回答by Matt Roy
I was trying to get a CSS "disabled" effect to be applied automatically when doing the following javascript:
我试图在执行以下 javascript 时自动应用 CSS“禁用”效果：
document.getElementById("TheButton").disabled = true;
If "TheButton" is defined with the class "TheClass":
如果“TheButton”是用“TheClass”类定义的：
.TheClass { background-color: LightBlue; }
.TheClass:hover { background-color: Cyan; }
The only thing that worked for me was with this CSS:
唯一对我有用的是这个 CSS：
.TheClass[disabled] { background-color: lightgrey; } /* for IE */
.TheClass[disabled='disabled'] { background-color: lightgrey; } /* for Chrome */
.TheClass[disabled]:hover { background-color: lightgrey; } /* for IE */
.TheClass[disabled='disabled']:hover { background-color: lightgrey; } /* for Chrome */
回答by Denis Chenu
Minimum, if only need grey at every time, no need :hover on .disabled
最小值，如果每次只需要灰色，则不需要 :hover on .disabled
ul li:hover{
color:red;
}
ul li.disabled{// Last rule precedence
color:grey;
}
Or for speed updating, use !important:
或者为了速度更新，使用 !important：
.disabled{
color:grey !important;
}
ul li:hover{
color:red;
}
回答by Madhukar Upadhyay
You can just do following in the cssto discard any color for disabled elements while we hover on it.
当我们将鼠标悬停在它上面时，您可以在css 中执行以下操作以丢弃禁用元素的任何颜色。
ul li:hover:not(:disabled) {
color: red;
}
This will cause the color redto be applied only when list is not disabled.
这将导致仅在未禁用列表时应用红色。
