Hover и Active только тогда, когда не отключены

Ответ 1

Вы можете использовать : enabled псевдокласс, но уведомление IE<9 не поддерживает его:

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

Ответ 2

Почему бы не использовать атрибут "disabled" в css. Это должно работать во всех браузерах.

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

Ответ 3

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

Вы можете попробовать это.

Ответ 4

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

Ответ 5

Подход с более низкой спецификой, который работает в большинстве современных браузеров (IE11 +, и исключая некоторые мобильные браузеры Opera и IE - http://caniuse.com/#feat=pointer-events)

.btn {
  /* base styles */
}

.btn[disabled]
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.btn:hover {
  color: red;
}

Правило pointer-events: none отключит зависание; вам не нужно повышать специфичность с помощью селектора .btn[disabled]:hover, чтобы аннулировать стиль наведения.

(FYI, это простой HTML-указатель-события, а не спорные аббревиатуры-указатели-события-указатели-события)

Ответ 6

Один из способов - добавить класс partcular при отключении кнопок и переопределить зависание и активные состояния для этого класса в css. Или удалите класс при отключении и указании свойств наведения и активного псевдо-класса в этом классе только в css. В любом случае, это, вероятно, не может быть сделано исключительно с помощью css, вам нужно будет использовать немного js.

Ответ 7

Если вы используете LESS или Sass, вы можете попробовать следующее:

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