Hover und Aktiv nur, wenn nicht deaktiviert

180

Ich benutze Hover , Aktiv und Deaktiviert , um Buttons zu stylen.

Das Problem ist jedoch, dass bei deaktivierter Schaltfläche der Hover und die aktiven Stile weiterhin gelten.

Wie wende ich Hover und Active nur auf aktivierten Schaltflächen an?

css

— Ali
quelle

324

Sie können Folgendes verwenden : Aktivierte Pseudoklasse, aber Notice unterstützt IE<9dies nicht :

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

— Ingenieur
quelle

3

Es gibt auch den :not()Selektor, der aber erst seit IE9 unterstützt wird. Siehe: developer.mozilla.org/en-US/docs/Web/CSS/:not

— jnns

button:hover:enabledschien in meinem Fall nicht zu funktionieren. Verwenden der IE9-Emulation unter IE11.

— Neolisk

74

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

Sie können dies versuchen ..

— Velayutham Anjamani
quelle

Dies ist eine gute Lösung, wenn der Status "Schwebeflug deaktiviert" mit dem Status "Nicht schwebend deaktiviert" identisch sein soll.

— Mikhael Loo

Ich <3 diese Lösung. ermöglicht mir Folgendes: <button class = "button"> schwebt </ button> und <button class = "button no-hover> schwebt nicht </ button>, indem Sie einfach Folgendes verwenden: not (.no-hover)

— Ben

34

Warum nicht das Attribut "disabled" in CSS verwenden? Dies muss in allen Browsern funktionieren.

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

— Madef
quelle

13

Decken Sie alle deaktivierten Zustände ab, indem Sie sie alle in einer Zeile auswählen:.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK

13

Ein Ansatz mit geringerer Spezifität, der in den meisten modernen Browsern funktioniert (IE11 + und mit Ausnahme einiger mobiler Opera- und IE-Browser - http://caniuse.com/#feat=pointer-events ):

.btn {
  /* base styles */
}

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

.btn:hover {
  color: red;
}

Die pointer-events: noneRegel deaktiviert den Schwebeflug. Sie müssen die Spezifität nicht mit einem .btn[disabled]:hoverSelektor erhöhen , um den Hover-Stil aufzuheben.

(Zu Ihrer Information, dies sind die einfachen HTML-Zeigerereignisse, nicht die umstrittenen Zeigerereignisse für abstrakte Eingabegeräte.)

— michai
quelle

12

In 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
quelle

10

Wenn Sie LESSoder verwenden Sass, können Sie Folgendes versuchen:

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

— fatlinesofcode
quelle

Dies ist eine gute Lösung in SASS, da der Hover-Effekt für eine deaktivierte Schaltfläche verarbeitet wird, sofern Sie ihn nicht in einen Block einschließen.

— 27.

2

Eine Möglichkeit besteht darin, eine bestimmte Klasse hinzuzufügen, während Schaltflächen deaktiviert und der Hover- und der aktive Status für diese Klasse in CSS überschrieben werden. Oder entfernen Sie eine Klasse, wenn Sie die Hover- und aktiven Pseudo-Eigenschaften für diese Klasse nur in CSS deaktivieren und angeben. In beiden Fällen kann dies wahrscheinlich nicht nur mit CSS durchgeführt werden. Sie müssen ein wenig js verwenden.

— Techfoobar
quelle