Hover et actif uniquement lorsqu'il n'est pas désactivé

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

Vous pouvez essayer ceci..

Pourquoi ne pas utiliser l'attribut "disabled" en css. Ce doit fonctionne sur tous les navigateurs.

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

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

Une approche de moindre spécificité qui fonctionne dans la plupart des navigateurs modernes (IE11+, et excluant certains navigateurs mobiles 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;
}

La règle pointer-events: none désactivera le survol; vous n'aurez pas besoin d'augmenter la spécificité avec un sélecteur .btn[disabled]:hover pour annuler le style de survol.

(pour votre information, il s'agit des simples événements de pointeur HTML, pas des événements de pointeur de périphériques d'entrée d'Abstraction litigieux)

Une façon est d'ajouter une classe partcular tout en désactivant les boutons et en remplaçant les États hover et active pour cette classe dans css. Ou supprimer une classe lorsque vous désactivez et spécifiez les propriétés hover et active pseudo sur cette classe uniquement en css. De toute façon, cela ne peut probablement pas être fait uniquement avec css, vous devrez utiliser un peu de js.

Si vous utilisez LESS ou Sass, Vous pouvez essayer ceci:

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