当按钮被禁用时，禁用悬停效果。

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

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

---

你的第二个建议是我实际上想要避免的，所以我会选择 pointer-events。旧浏览器的兼容性不是问题。谢谢！ - dimlucas

Answer 2

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

使用以下代码： button[disabled] { opacity:0.4; cursor : not-allowed !important; }

该代码可以使禁用状态下的按钮变得半透明，同时鼠标指针也会变成“禁止”状态。

- Aman Gupta

Answer 3

使用非选择器（not selector）与属性选择器或类选择器一起使用。请注意，此方法无法在IE8及以下版本中使用。

.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:not(.button-disabled){
    background-color: #2980b9; 
}

.button-blue:hover:not([disabled]){
    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>

- Gokhan Kurt

---

在所有浏览器中，可能无法始终正常工作。 - Praveen Kumar Purushothaman

Answer 4

使用非选择器。

.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:not(.button-disabled):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>

- se0kjun

---

在所有浏览器上并不一定会持续工作。 - Praveen Kumar Purushothaman