Fareyle üzerine gelme ve yalnızca devre dışı bırakılmadığında etkin

188

Düğmeleri stilize etmek için fareyle üzerine gelindi , aktif ve devre dışı kullanıyorum.

Ancak sorun, düğme devre dışı bırakıldığında fareyle üzerine gelindiğinde ve etkin stiller hala geçerlidir.

Fareyle üzerine gelindiğinde ve yalnızca etkin düğmelerde nasıl aktif olarak uygulanır?

css

— Ali
kaynak

330

Şunları kullanabilirsiniz : etkin sözde sınıf, ancak uyarı IE<9bunu desteklemiyor :

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

— Mühendis
kaynak

3

Orada da var :not()seçici, ama sonra tekrar, sadece IE9 beri desteklenen yanı var. Bakınız: developer.mozilla.org/tr-TR/docs/Web/CSS/:not

— jnns

button:hover:enabledbenim durumumda işe yaramadı. IE11 altında IE9 öykünmesini kullanma.

— Neolisk

76

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

Bunu deneyebilirsiniz ..

— Velayutham Anjamani
kaynak

"Fareyle üzerine gelindiğinde devre dışı" durumunun "fareyle üzerine gelindiğinde devre dışı" durumu ile aynı görünmesini istediğinizde bu iyi bir çözümdür.

— Mikhael Loo

Ben bu çözümü <3. aşağıdakilere sahip olmamı sağlar: <button class = "button"> hovers </button> ve <button class = "button no-hover> yalnızca şunu kullanarak fareyle üzerine gelmez </button>: not (.no-hover)

— Ben

35

Neden css'de "devre dışı" özelliğini kullanmıyorsunuz? Bu, tüm tarayıcılarda çalışmalıdır.

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

— Madef
kaynak

13

Tüm engelli durumlarını tek bir satırda seçerek .button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— kaplayın

13

Sass'ta (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
kaynak

13

Çoğu modern tarayıcıda çalışan daha düşük özgüllük yaklaşımı (IE11 + ve bazı mobil Opera ve IE tarayıcıları hariç - 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: noneKural hover devre dışı bırakır; .btn[disabled]:hoverfareyle üzerine gelme stilini geçersiz kılmak için bir seçiciyle özgüllüğü artırmanız gerekmez .

(Bilginize, bu basit HTML işaretçi olaylarıdır, tartışmalı soyutlama-girdi-aygıtları işaretçi olayları değil)

— michai
kaynak

11

LESSVeya kullanıyorsanız Sass, Bunu deneyebilirsiniz:

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

— fatlinesofcode
kaynak

Fareyle üzerine gelmediğiniz sürece, fareyle üzerine gelme efekti devre dışı bırakılmış bir düğme için işleneceğinden bu SASS için iyi bir çözümdür.

— mbokil

2

Bunun bir yolu, düğmeleri devre dışı bırakıp css'de o sınıf için fareyle üzerine gelme ve etkin durumları geçersiz kılarken bir parçacık sınıfı eklemektir. Veya o sınıftaki fareyle üzerine gelme ve etkin sahte özellikleri devre dışı bırakıp belirtirken bir sınıfı kaldırmak yalnızca css biçiminde. Her iki durumda da, sadece css ile yapılamaz, biraz js kullanmanız gerekir.

— techfoobar
kaynak