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

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.

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
}

.child{
  display:inline-block;
  background:#000;
  border:1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

.parent:hover .child{
  opacity: 0.3;
}
.parent .child:hover{
  opacity: 1;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Jika tidak ... cukup gunakan logika default:

.child{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}

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)?

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

a {
  /*styles*/
} 

adalah normal (tautan tidak diarahkan)

a:hover {
  /*styles*/
} 

adalah tautan yang di-hover