Survol et actif uniquement lorsqu'ils ne sont pas désactivés

205

J'utilise le survol , actif et désactivé pour styliser les boutons.

Mais le problème est que lorsque le bouton est désactivé, le survol et les styles actifs s'appliquent toujours.

Comment appliquer le survol et l'activer uniquement sur les boutons activés?

css

— Ali
source

357

Vous pouvez utiliser : la pseudo-classe activée , mais l' avis IE<9ne la prend pas en charge :

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

— Ingénieur
source

4

Il y a aussi le :not()sélecteur, mais là encore, il n'est pris en charge que depuis IE9 également. Voir: developer.mozilla.org/en-US/docs/Web/CSS/:not

— jnns

button:hover:enabledne semble pas fonctionner dans mon cas. Utilisation de l'émulation IE9 sous IE11.

— Neolisk

85

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

Vous pouvez essayer ceci.

— Velayutham Anjamani
source

C'est une bonne solution lorsque vous voulez que l'état "hover désactivé" soit identique à l'état "non survolé désactivé".

— Mikhael Loo

Je <3 cette solution. me permet d'avoir ce qui suit: <button class = "button"> survole </button> et <button class = "button no-hover> ne survole pas </button> en utilisant simplement: not (.no-hover)

— Ben

37

Pourquoi ne pas utiliser l'attribut "désactivé" en css. Cela doit fonctionner sur tous les navigateurs.

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

— Madef
source

14

Couvrez tous les états désactivés en les sélectionnant tous sur une seule ligne:.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK

15

Si vous utilisez LESSou Sass, vous pouvez essayer ceci:

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

— fatlinesofcode
source

1

C'est une bonne solution dans SASS car l'effet de survol sera traité pour un bouton désactivé à moins que vous ne l'enveloppiez dans un bloc non.

— mbokil le

14

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

— jakeforaker
source

13

Une approche à moindre spécificité qui fonctionne dans la plupart des navigateurs modernes (IE11 +, et à l'exclusion de 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 pointer-events: nonerègle désactivera le survol; vous n'aurez pas besoin d'augmenter la spécificité avec un .btn[disabled]:hoversélecteur pour annuler le style de survol.

(Pour info, ce sont les simples événements de pointeur HTML, pas les événements de pointeur de périphériques d'entrée abstraites litigieux)

— michai
source

2

Une façon consiste à ajouter une classe particulière tout en désactivant les boutons et en remplaçant les états de survol et actif pour cette classe dans css. Ou en supprimant une classe lors de la désactivation et de la spécification du survol et des pseudo propriétés actives sur cette classe uniquement en css. Quoi qu'il en soit, cela ne peut probablement pas être fait uniquement avec css, vous devrez utiliser un peu de js.

— techfoobar
source