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
la source

Réponses:

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
la 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
la 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
la 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
la 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
la 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
la 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
la source