Aktywuj i Aktywuj tylko wtedy, gdy nie jest wyłączone

186

Używam aktywowania , aktywowania i wyłączania, aby stylizować Przyciski.

Problem polega jednak na tym, że gdy przycisk jest wyłączony, aktywowane są style aktywowania i aktywowania.

Jak zastosować aktywowanie i aktywne tylko na włączonych przyciskach?

css Ali
źródło

Odpowiedzi:

329

Możesz użyć : pseudoklasa włączona , ale zawiadomienie IE<9go nie obsługuje :

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}
Inżynier
źródło
3
Jest też :not()selektor, ale z drugiej strony jest obsługiwany tylko od IE9. Zobacz: developer.mozilla.org/en-US/docs/Web/CSS/:not
jnns
button:hover:enabledw moim przypadku nie działało. Korzystanie z emulacji IE9 w IE11.
Neolisk
75 
.button:active:hover:not([disabled]) {
    /*your styles*/
}

Możesz spróbować tego ..

Velayutham Anjamani
źródło
Jest to dobre rozwiązanie, gdy chcesz, aby stan „aktywowanego wyłączania” wyglądał identycznie ze stanem „nieaktywnego wyłączania”.
Mikhael Loo,
<3 tego rozwiązania. pozwala mi mieć następujące elementy: <button class = "button"> unosi się </button> i <button class = "przycisk no-hover> nie unosi się </button>, używając tylko: not (.no-hover)
Ben,
34

Dlaczego nie użyć atrybutu „disabled” w css. To musi działać we wszystkich przeglądarkach.

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}
Madef
źródło
13
Obejmuj wszystkie wyłączone stany, zaznaczając je wszystkie w jednym wierszu:.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}
DBK,
13

Podejście o niższej specyficzności, które działa w większości nowoczesnych przeglądarek (IE11 +, z wyłączeniem niektórych mobilnych przeglądarek Opera i IE - http://caniuse.com/#feat=pointer-events ):

.btn {
  /* base styles */
}

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

.btn:hover {
  color: red;
}

pointer-events: noneZasada wyłącza unosić; nie trzeba zwiększać swoistości za pomocą .btn[disabled]:hoverselektora, aby anulować styl aktywowania.

(FYI, to są proste zdarzenia wskaźnikowe HTML, a nie kontrowersyjne zdarzenia wskaźnikowe urządzeń pobierających dane wejściowe)

Michai
źródło
12

W 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
źródło
10

Jeśli używasz LESSlub Sass, możesz spróbować:

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}
fatlinesofcode
źródło
Jest to dobre rozwiązanie w SASS, ponieważ efekt aktywowania zostanie przetworzony dla wyłączonego przycisku, chyba że zostanie zawinięty w blok.
mbokil
2

Jednym ze sposobów jest dodanie klasy cząstkowej przy jednoczesnym wyłączeniu przycisków i przesłonięciu stanów najechania i aktywnych dla tej klasy w css. Lub usuwanie klasy podczas wyłączania i określania aktywowania i aktywnych pseudo właściwości tej klasy tylko w css. Tak czy inaczej, prawdopodobnie nie można tego zrobić wyłącznie za pomocą css, musisz użyć trochę js.

techfoobar
źródło