Apakah ada pseudo-class CSS yang berlawanan dengan: hover?

91

Apakah ada pseudo-class di CSS untuk ditentukan

:not(:hover)

Atau itu satu-satunya cara untuk menentukan item yang tidak di-hover?

Saya memeriksa beberapa referensi CSS3, dan saya tidak melihat adanya sebutan pseudo-class CSS untuk menentukan kebalikan dari: hover.

RockPaperLz- Mask it atau Casket
sumber
1
Sebagai gantinya element:not(:hover)gunakan element.
lmgonzalves
5
@lmgonzalves Itu tidak akan berhasil; yang akan memaksa gaya di status hovered dan non-hovered.
RockPaperLz- Mask it atau Casket
Mengapa tidak :not(:hover)?
Oriol
@Oriol Hanya karena tidak sebersih pseudo-class non-negasi dan karena mungkin secara komputasi lebih mahal daripada kelas pseudo yang dirancang untuk tujuan itu.
RockPaperLz- Mask it atau Casket

Jawaban:

146

Ya, gunakan :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

jsBin demo

Contoh lain; Saya pikir Anda ingin: "ketika salah satu di-hover, redupkan semua elemen lainnya" .

Jika asumsi saya benar, dan dengan asumsi semua penyeleksi Anda berada di dalam induk yang sama:

.parent:hover .child{
    opacity: 0.2;      // Dim all other elements
}
.child:hover{
   opacity: 1;         // Not the hovered one
}

Jika tidak ... cukup gunakan logika default:

.child{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}
Roko C. Buljan
sumber
Kalimat pertama Anda (dengan asumsi itu benar!) Terdengar seperti jawabannya. Terima kasih! Saya tidak dapat menemukan pseudo-class CSS yang sesuai, karena itu pasti belum ada. Contoh yang Anda berikan tidak berlaku untuk apa yang saya kerjakan, tetapi sangat berguna dan membantu, bagaimanapun juga. Saya bertanya-tanya seberapa mahal contoh pertama itu, karena cocok dengan hampir semua hal. Ada pemikiran?
RockPaperLz- Topengkan atau Peti mati
@RockPaperLizard baik, jika Anda menggunakan 1000 elemen anak im mungkin akan sedikit lambat jsbin.com/hazega/1/edit?html,css,output sebaliknya, 100, 200 elemen akan bekerja dengan baik.
Roko C. Buljan
Terima kasih. Bekerja untuk :not(:disabled)juga dan saya berasumsi banyak atribut serupa lainnya.
Tidak Ada Pengembalian Dana Tidak Ada Pengembalian
3

Tidak ada kelas semu seperti itu. Tidak perlu, saat Anda bisa menggunakannya :not(:hover). Inti dari :not()pseudo-class adalah untuk memungkinkan penulis menulis negasi tanpa harus menentukan negasi terpisah dari setiap pseudo-class dinamis yang ada (dan yang akan datang) di mana sebuah elemen hanya bisa cocok atau tidak cocok dengan pseudo-class.

Misalnya, hanya beberapa elemen yang dapat :enabledatau :disabled- sebagian besar elemen bukan keduanya karena semantik tidak berlaku - tetapi elemen hanya dapat ditentukan oleh perangkat penunjuk ( :hover), atau tidak ( :not(:hover)). Memberikan negasi yang sudah bisa langsung dicapai dengan menggunakan :not()akan sangat merusak kegunaannya (meskipun masih bisa digunakan untuk meniadakan pemilih sederhana lainnya - atau seluruh pemilih kompleks di masa mendatang).

Argumen bahwa kelas semu seperti itu akan secara komputasi lebih murah cukup lemah. Implementasi yang paling naif dari kelas-semu seperti itu adalah pemeriksaan literal :not(:hover), yang tidak akan lebih baik. Implementasi yang lebih kompleks atau dioptimalkan dan Anda meminta vendor untuk mengimplementasikan pseudo-class yang secepat atau bahkan lebih cepat dari :not(:hover), sesuatu yang sudah cukup tidak umum dari kasus penggunaan mempertimbangkan opsi lain yang Anda miliki seperti cascading dan :not(:hover)(untuk kapan pun cascading bukan merupakan opsi) yang dapat Anda akses dengan mudah. Ini tidak membenarkan waktu dan upaya untuk menentukan, mengimplementasikan dan menguji alternatif untuk setidaknya satu metode lain yang ada yang 100% setara secara fungsional (dan yang berlaku untuk setidaknya80% dari skenario). Dan ada juga masalah penamaan kelas semu seperti itu - Anda belum mengusulkan nama untuk itu, dan saya juga tidak bisa memikirkan yang bagus. :not-hoverhanya lebih pendek dua byte dan hanya sedikit pekerjaan untuk mengetik. Jika ada, itu berpotensi lebih membingungkan daripada :not(:hover).

Jika Anda khawatir tentang kekhususan, catatan bahwa para :not()pseudo-kelas itu sendiri tidak dihitung untuk spesifisitas; hanya argumennya yang paling spesifik . :not(:hover)dan :hoversama-sama spesifik. Jadi, kekhususan juga bukan masalah.

Jika Anda khawatir tentang dukungan browser, pseudo-class seperti itu, jika diperkenalkan, kemungkinan besar akan diperkenalkan bersamaan :not(), atau di level Selectors yang lebih baru, karena tidak muncul di CSS2 ( :hoveryang pertama kali diperkenalkan lebih dari 17 tahun lalu, dan pertama kali diterapkan di IE4 setahun lagi sebelumnya). Memperkenalkannya di tingkat selanjutnya tidak ada gunanya karena penulis hanya akan dipaksa untuk terus menggunakan :not(:hover)sampai browser mulai menerapkan kelas semu baru ini, dan mereka tidak memiliki alasan untuk beralih.

Perhatikan bahwa ini tidak sama dengan pertanyaan berikut, yang berbicara tentang peristiwa vs status (awalnya tentang :focusbukan :hover, tetapi prinsip yang sama berlaku): Apakah CSS memiliki: blur selector (pseudo-class)?

BoltClock
sumber
1

Jika Anda ingin menampilkan sesuatu hanya saat melayang di atas sesuatu yang lain, Anda dapat menggunakan

selector:not(:hover)

seperti ini:

section{
   font-size:3em;
}

div:not(:hover) + section{
 display:none;
}
<div>Hover on me</div>

<section>Peek A Boo!</section>

Ada beberapa efek dan hasil yang tidak biasa saat menggunakan :not()yang harus Anda ingat:

  • :not(:not(...)), :not(p::before)tidak mungkin
  • :not(*) jelas tidak akan pernah diterapkan
  • :not(.foo)akan cocok dengan apa pun yang tidak .foo, termasuk tag seperti <HTML>dan<body>
  • meningkatkan kekhususan aturan, misalnya: #foo:not(#bar)akan mencocokkan elemen yang sama dengan yang lebih sederhana #foo, tetapi memiliki spesifisitas yang lebih tinggi.

andoperasi dengan :not:

  • Elemen yang bukan <div>dan bukan <span>elemen: body :not(div):not(span){}

oroperasi dengan :not, ini belum didukung dengan baik.

  • Elemen yang bukan .crazyatau .fancy:body :not(.crazy, .fancy){}

Sumber MDN

Aditya Patnaik
sumber
0
a {
  /*styles*/
} 

adalah normal (tautan tidak diarahkan)

a:hover {
  /*styles*/
} 

adalah tautan yang di-hover

nikola_wd
sumber
2
Ini tidak akurat. Yang pertama akan memberi gaya pada item, baik saat di-hover dan tidak di-hover, kecuali yang kedua juga ditentukan. Terlepas dari itu, yang pertama diterapkan di kedua status, dan yang kedua hanya akan menimpanya di salah satu dari dua status.
RockPaperLz- Mask it atau Casket
Anda benar tentang itu. Tapi itulah cara melakukannya dan juga satu-satunya cara untuk melakukannya dengan css. Apa sebenarnya yang ingin Anda capai?
nikola_wd
Terima kasih. Saya menambahkan komentar yang menjawab pertanyaan Anda di bagian pertanyaan utama di atas karena pengguna SO lain menanyakan pertanyaan yang sama seperti milik Anda.
RockPaperLz- Mask it atau Casket