CSS 仅在未禁用时悬停和活动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11600687/
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
Hover and Active only when not disabled
提问by Ali
I use hover, activeand disabledto style Buttons.
我使用hover、active和disabled来设置按钮的样式。
But the problem is when the button is disabled the hover and active styles still applies.
但问题是当按钮被禁用时，悬停和活动样式仍然适用。
How to apply hover and active only on enabled buttons?
如何仅在启用的按钮上应用悬停和活动？
回答by Engineer
回答by Velayutham Anjamani
.button:active:hover:not([disabled]) {
/*your styles*/
}
You can try this..
你可以试试这个..
回答by Madef
Why not using attribute "disabled" in css. This must works on all browsers.
为什么不在 css 中使用“禁用”属性。这必须适用于所有浏览器。
button[disabled]:hover {
background: red;
}
button:hover {
background: lime;
}
回答by jakeforaker
In sass (scss):
在 sass (scss) 中：
button {
color: white;
cursor: pointer;
border-radius: 4px;
&:disabled{
opacity: 0.4;
&:hover{
opacity: 0.4; //this is what you want
}
}
&:hover{
opacity: 0.9;
}
}
回答by michai
A lower-specificity approach that works in most modern browsers (IE11+, and excluding some mobile Opera & IE browsers -- http://caniuse.com/#feat=pointer-events):
适用于大多数现代浏览器（IE11+，不包括某些移动 Opera 和 IE 浏览器 - http://caniuse.com/#feat=pointer-events）的低特异性方法：
.btn {
/* base styles */
}
.btn[disabled]
opacity: 0.4;
cursor: default;
pointer-events: none;
}
.btn:hover {
color: red;
}
The pointer-events: nonerule will disable hover; you won't need to raise specificity with a .btn[disabled]:hoverselector to nullify the hover style.
该pointer-events: none规则将禁用悬停；您不需要使用.btn[disabled]:hover选择器提高特异性来取消悬停样式。
(FYI, this is the simple HTML pointer-events, not the contentious abstracting-input-devices pointer-events)
（仅供参考，这是简单的 HTML 指针事件，而不是有争议的抽象输入设备指针事件）
回答by fatlinesofcode
If you are using LESSor Sass, You can try this:
如果您正在使用LESS或Sass，您可以试试这个：
.btn {
&[disabled] {
opacity: 0.6;
}
&:hover, &:active {
&:not([disabled]) {
background-color: darken($orange, 15);
}
}
}
回答by techfoobar
One way is to add a partcular class while disabling buttons and overriding the hover and active states for that class in css. Or removing a class when disabling and specifying the hover and active pseudo properties on that class only in css. Either way, it likely cannot be done purely with css, you'll need to use a bit of js.
一种方法是添加一个特定的类，同时禁用按钮并覆盖 css 中该类的悬停和活动状态。或者仅在 css 中禁用和指定该类上的悬停和活动伪属性时删除一个类。无论哪种方式，它可能都不能完全用 css 来完成，你需要使用一些 js。
