仅在未禁用时悬停和活动

Question

我使用 hover、active 和 disabled 来设置按钮样式。

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

如何仅在启用的按钮上应用悬停和活动？

Answer 1

您可以使用 :enabled 伪类，但 注意

IE<9

不支持它:

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

Answer 2

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

你可以试试这个..

Answer 3

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

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

Answer 4

如果您正在使用

LESS

或

Sass

，您可以尝试以下操作：

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

Answer 5

使用最轻的触摸：通过规则顺序覆盖。

.btn {
  /* base styles */
}

.btn:hover {
  color: red;
}

.btn:active {
  color: green;
}

.btn:disabled {
  color: #aaa;
}

诀窍在于顺序——首先应用所有非禁用状态，确保它们都具有相同的特异性，最后禁用，具有相同的特异性。

这不适用于添加到链接或非交互式元素的“禁用”类，这些元素没有

disabled

属性。

（编辑以删除更高特异性的规则，并弄乱

pointer-events

）

Answer 6

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

Answer 7

当我找到一种最简单的方法时，我太寻找它了。

对于纯CSS：

.button {
  background-color: #222222;
  color: #ffffff;
}

.button:hover {
  background-color: #111111;
}

.button:active {
  background-color: #000000;
}

.button:disabled {
  opacity: 0.5;
}

.button:disabled:hover {
  /*To see no effect except the disabled ones, resets the effects of hover to default of button*/
  background-color: #222222;
  color: #ffffff;
}

对于 SCSS：

.button{
  background-color: #222222;
  color: ffffff;
  &:hover{
    background: #111111;
  }
  &:active{
    background: #000000;
  }
  &:disabled{
    opacity: 0.5;
    &:hover{
      /*To see no effect except the disabled ones, resets the effects of hover to default of button*/
      background-color: #222222;
      color: #ffffff;
    }
  }
}

Answer 8

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

Answer 9

选项：

1. 添加启用状态选择器。

button:enabled {
}

这要求元素实际上具有启用状态。 （按钮可以，div 则不行。）

2. 取消选择器的禁用状态。

button:not(:disabled) {
}

3. 禁用点事件。

button:disabled {
  pointer-events: none;
}

我喜欢最后一种方法，因为它可以应用于多种风格，而且我从未发现它是一个问题。

Answer 10

/* Styles for the disabled state */
.customButton:disabled,
.customButton[disabled] {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed; /* Optional: Show a "not-allowed" cursor for better visual feedback */
}

.customButton:disabled:hover,
.customButton[disabled]:hover {
  /* You can optionally add different styles for the disabled button when hovered */
}

Answer 11

我在我的项目中使用下面的一个。

.bg-brand-3 {
  background-color: black;
  &[type="button"]:enabled {
    &:hover {
      background-color: orange;
    }
    &:active {
      background-color: green;
    }
  }
  &[type="submit"] {
    // css
  }
}

:enable

与

:not(:disabled)

含义相同

Answer 12

将伪“禁用”移至所有其他项下方并添加“！重要”：

.element { color: red; cursor: pointer }
.element:focus{ color: green; }
.element:hover { color: blue; }
.element:active { color: black }
.element:disabled { color: gray !important; cursor: not-allowed !important }