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

Question

我有这个CSS：

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

我对残疾人感到困惑。如果按钮被禁用，我如何才能使CSS不起作用？

Answer 1

如果您不需要支持IE＆lt; 9你可以使用:enabled伪类。

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

Answer 2

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

HTML

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

CSS

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

Answer 3

您可以使用negation pseudo class selector (CSS 3)。我不确定是否还有使用attribute selectors (CSS 2.1)的解决方案。

鉴于此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>

和这个css

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

您可以实现matiching选择器内的每个按钮都没有应用悬停样式。 请参阅this example。

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

的表格

• 浏览器支持css2 selectors
• 浏览器支持css3 selectors

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

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

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

Answer 4

使用CSS：Not属性选择器仅定位不具有已禁用属性的元素。

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

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

Answer 5

在添加“：enabled”选择器后，它对我有用：

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

Answer 6

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

。或.btn：disabled {pointer-events：none}