如果按钮被禁用，如何使 CSS Hover 不起作用？

How can I make a CSS Hover not work if a button is disabled?

提问by Samantha J T Star

I have this CSS:

我有这个 CSS：

html.darkBlue .btn1 button:hover:not(.nohover) {
  background: #0007d5;
  border: 1px solid #0007d5;
  color: white;
}

I am rather confused about disabled. How can I make it so that this CSS does not work if the button is disabled?

我对残疾人很困惑。如果按钮被禁用，我怎样才能使这个 CSS 不起作用？

回答by Lars Beck

If you don't need to support IE < 9 you could use the :enabledpseudo class.

如果您不需要支持 IE < 9，则可以使用:enabled伪类。

html.darkBlue .btn1 button:hover:enabled {
    background: #0007d5;
    border: 1px solid #0007d5;
    color: white;
}

回答by user2314737

Try with (demo http://jsfiddle.net/JDNLk/)

尝试使用（演示http://jsfiddle.net/JDNLk/）

HTML

HTML

<button class="btn1" disabled="disabled">disabled</button>
<button class="btn1">enabled</button>

CSS

CSS

html.darkBlue .btn1 button:hover:not([enabled="enabled"]) {
  background: #0007d5;
  border: 1px solid #0007d5;
  color: white;   
}

回答by surfmuggle

You can use the negation pseudo class selector (CSS 3). I am not sure if there is also a solution using attribute selectors (CSS 2.1).

您可以使用否定伪类选择器 (CSS 3)。我不确定是否还有使用属性选择器 (CSS 2.1)的解决方案。

Given this html

鉴于此 html

  <div class="darkBlue">
    <h2>disable hover for disabled buttons</h2>
    <div class="btn2">
      <button>hover enabled</button>    <br/>     
      <button disabled="disabled">hover disabled</button>         
    </div>  
  </div>

and this css

和这个 css

.darkBlue .btn2 button:hover:not([disabled="disabled"]) {
  background: #0007d5;
  border: 1px solid #0007d5;
  color: white;   
}

you can achive that every button inside the matiching selector has no hover-style applied. See this example.

您可以实现匹配选择器内的每个按钮都没有应用悬停样式。请参阅此示例。

At caniuse.comyou can find tables that compare which browser supports which selector

在caniuse.com，您可以找到比较哪个浏览器支持哪个选择器的表格

• browser support for css2 selectors
• browser support for css3 selectors

• 浏览器支持 css2 选择器
• 浏览器支持 css3 选择器

Update using a hack to be able to use css2 selectors

使用 hack 进行更新以能够使用 css2 选择器

This is a hack and is yet not exactly the same but in case you are restricted to css 2.1 this may be a starting point. If you define a seperate style-rule for disabled buttons and use the color that you picked for disabled buttons you can fake a disabled hover-style:

这是一个 hack，但并不完全相同，但如果您仅限于 css 2.1，这可能是一个起点。如果您为禁用按钮定义单独的样式规则并使用您为禁用按钮选择的颜色，则可以伪造禁用悬停样式：

.btn3 button[disabled="disabled"]:hover
{
  background-color: rgb(212, 208, 200);
  color: rgb(128, 128, 128);  
}

回答by Cubicle Dragon

Use the CSS :Not attribute selector to only target elements that don't have the disabled attribute.

使用 CSS :Not 属性选择器仅定位没有 disabled 属性的元素。

html.darkBlue .btn1 button:not([disabled]):hover

That way your hover style will only be applied to buttons that are not disabled.

这样，您的悬停样式将仅应用于未禁用的按钮。

回答by user3161877

.btn:disabled:hover{color:default-color;background:default prop}

. or .btn:disabled{pointer-events:none}

. 或 .btn:disabled{pointer-events:none}

回答by Yan Karlo

It worked for me after adding the ":enabled" selector as following :

添加“：启用”选择器后，它对我有用，如下所示：

element-class:hover:enabled {
  properties...
}