禁用按钮时禁用悬停效果

Question

我创建了一组不同大小、颜色和效果的按钮，所以有绿色按钮、红色按钮等，其中一个是下面的蓝色按钮。如您所见，鼠标悬停时背景颜色会变暗

我只想创建一个 CSS 类 .button-disabled 这将使按钮看起来像一个禁用的按钮。我正在尝试找出一种方法来在禁用按钮时删除悬停效果（如下例中的第二个按钮）

请注意，我希望此类应用于具有不同背景颜色的按钮，因此我不能只添加如下内容：

 .button-disabled:hover{
    background-color: /** Same as when not hovering **/
}

 .button{
   text-decoration: none;
   border: none;
   padding: 12px 20px;
   cursor: pointer;
   outline: 0;
   display: inline-block;
   margin-right: 2px;
   color: #ffffff;
   border-radius: 12px;
}

.button-blue{
    background-color: #3498db;
}

.button-blue:hover{
    background-color: #2980b9;
}

.button-blue:active{
    color: #3498db;
    background-color: #ffffff;
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.2);
}

.button-disabled{
    opacity: 0.6;
}

 <button class="button button-blue">Enabled Button</button>
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

原文由 dimlucas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 pointer-events: none 来确保它不执行任何操作。这是阻止任何 hover 效果甚至单击元素上发生的正确方法：

 .button {
  text-decoration: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  outline: 0;
  display: inline-block;
  margin-right: 2px;
  color: #ffffff;
  border-radius: 12px;
}
.button-blue {
  background-color: #3498db;
}
.button-blue:hover {
  background-color: #2980b9;
}
.button-blue:active {
  color: #3498db;
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
}
.button-disabled {
  opacity: 0.6;
  pointer-events: none;
}

 <button class="button button-blue">Enabled Button</button>
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

由于这仅适用于新版本的浏览器，因此最好使用相同的颜色，同时添加 :hover 状态：

 .button {
  text-decoration: none;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  outline: 0;
  display: inline-block;
  margin-right: 2px;
  color: #ffffff;
  border-radius: 12px;
}
.button-blue {
  background-color: #3498db;
}
.button-blue:hover {
  background-color: #2980b9;
}
.button-blue:active {
  color: #3498db;
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
}
.button-blue.button-disabled:hover,
.button-disabled {
  opacity: 0.6;
  background-color: #3498db;
}

 <button class="button button-blue">Enabled Button</button>
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

当您定义了多个类时，这将变得很痛苦，并且您必须为每种颜色重新定义 disabled 类。

原文由 Praveen Kumar Purushothaman 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

有一个非常简单的方法。我不知道为什么人们把它复杂化了。

使用以下内容：

button[disabled] { opacity:0.4; cursor : not-allowed !important; }

原文由 Aman Gupta 发布，翻译遵循 CC BY-SA 4.0 许可协议