我使用悬停,激活和禁用样式按钮。

但问题是,当按钮被禁用时,悬停和活动样式仍然适用。

如何应用悬停和活动仅在启用按钮?


当前回答

.button:active:hover:not([disabled]) {
    /*your styles*/
}

你可以试试这个。

其他回答

你可以使用:enabled伪类,但注意IE<9不支持它:

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}

一种方法是添加一个特定的类,同时禁用按钮,并覆盖css中该类的悬停和活动状态。或者在css中禁用和指定悬停和活动伪属性时删除一个类。不管怎样,它可能不能完全用css完成,你需要使用一点js。

如果你正在使用LESS或Sass,你可以试试这个:

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}

在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;
  }
}

为什么不在css中使用属性“disabled”。这必须适用于所有浏览器。

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}