Hover & Active

Hello !

Je viens avec vous un problème, que j'ai corrigé mais... Je ne comprends pas l'origine du problème, donc je me dis que peut être l'un de vous a la réponse.

Je stylise des boutons, en modifiant le background du hover et du active. Etant donné que j'ai un style différent (opacité à 35) pour mes boutons disabled, je dois empêcher le hover de se déclencher sur les boutons disabled, logique, d'où le code suivant :

.secondary-button {
    background : #FBB900;
    color : #565656;
    text-transform: uppercase;
}

.secondary-button:not([disabled]):hover {
    background : #FFD02E;
}

.secondary-button:active {
    background : #DA9D00;
}

Tout marche bien, pas de hover sur mes boutons disabled, super ! Sauf que... Mes secondary-button ne voient plus la couleur de leur actif se modifier. En mode active, c'est le background de mon hover qui s'affiche. J'ai résolu le problème en faisant plutôt comme ça :

.secondary-button,
.secondary-button[disabled]:hover {
    background : #FBB900;
    color : #565656;
    text-transform: uppercase;
}

.secondary-button:hover {
    background : #FFD02E;
}

.secondary-button:active {
    background : #DA9D00;
}

Mais je ne comprends pas pourquoi mon premier code ne fonctionnait pas. Pourriez vous m'expliquer ?

Merciiiii

Edit : le smiley cassé que vous voyez c'est simplement la chaîne [ disabled ] (sans les espaces).
Modifié par Aqua_Ev (06 Oct 2015 - 16:08)