Arahkan dan Aktif hanya ketika tidak dinonaktifkan

186

Saya menggunakan kursor , aktif dan dinonaktifkan untuk Buttons gaya.

Tetapi masalahnya adalah ketika tombol dinonaktifkan, hover dan gaya aktif masih berlaku.

Bagaimana menerapkan melayang dan hanya aktif pada tombol yang diaktifkan?

css

— Ali
sumber

329

Anda dapat menggunakan : mengaktifkan pseudo-class, tetapi pemberitahuan IE<9tidak mendukungnya :

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

— Insinyur
sumber

3

Ada juga :not()pemilih, tetapi sekali lagi, itu hanya didukung sejak IE9 juga. Lihat: developer.mozilla.org/en-US/docs/Web/CSS/:not

— jnns

button:hover:enabledsepertinya tidak berhasil dalam kasus saya. Menggunakan emulasi IE9 di bawah IE11.

— Neolisk

75

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

Anda bisa coba ini ..

— Velayutham Anjamani
sumber

Ini adalah solusi yang baik untuk ketika Anda ingin negara "melayang dinonaktifkan" terlihat identik dengan "non-melayang dinonaktifkan".

— Mikhael Loo

Saya <3 solusi ini. memungkinkan saya untuk memiliki yang berikut: <button class = "button"> hover </button> dan <button class = "button no-hover> tidak hover </button> hanya dengan menggunakan: not (.no-hover)

— Ben

35

Mengapa tidak menggunakan atribut "dinonaktifkan" di css. Ini harus bekerja di semua browser.

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

— Madef
sumber

13

Tutupi semua negara yang dinonaktifkan dengan memilih semuanya dalam satu baris:.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK

13

Pendekatan dengan spesifisitas rendah yang berfungsi di sebagian besar browser modern (IE11 +, dan mengecualikan beberapa browser Opera & IE mobile - http://caniuse.com/#feat=pointer-events ):

.btn {
  /* base styles */
}

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

.btn:hover {
  color: red;
}

The pointer-events: noneAturan akan menonaktifkan melayang; Anda tidak perlu meningkatkan spesifisitas dengan .btn[disabled]:hoverpemilih untuk membatalkan gaya hover.

(FYI, ini adalah peristiwa-pointer HTML sederhana, bukan abstrak-input-perangkat pointer-peristiwa)

— michai
sumber

12

Dalam 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;
  }
}

— pembuat jake
sumber

10

Jika Anda menggunakan LESSatau Sass, Anda dapat mencoba ini:

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

— fatlinesofcode
sumber

Ini adalah solusi yang baik dalam SASS karena efek hover akan diproses untuk tombol yang dinonaktifkan kecuali jika Anda membungkusnya dengan tidak memblokir.

— mbokil

2

Salah satu caranya adalah dengan menambahkan kelas partcular sambil menonaktifkan tombol dan mengesampingkan hover dan status aktif untuk kelas itu di css. Atau menghapus kelas saat menonaktifkan dan menentukan hover dan properti pseudo aktif pada kelas itu hanya dalam css. Either way, kemungkinan tidak dapat dilakukan sepenuhnya dengan css, Anda harus menggunakan sedikit js.

— techfoobar
sumber