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

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