: Hover için ters bir CSS sözde sınıfı var mı?

CSS'de belirtilecek bir sözde sınıf var mı

:not(:hover)

Yoksa üzerine gelmeyen bir öğeyi belirlemenin tek yolu bu mu?

Birkaç CSS3 referansından geçtim ve: hover'ın tam tersini belirtmek için bir CSS sözde sınıfından bahsetmedim.

Evet, kullan :not(:hover)

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

jsBin demosu

Başka bir örnek; Sanırım şunu yapmak istiyorsunuz: "biri üzerine gelindiğinde, diğer tüm öğeleri karartın" .

Varsayımım doğruysa ve tüm seçicilerinizin aynı ebeveyn içinde olduğunu varsayarsak:

.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>

Aksi takdirde ... sadece varsayılan mantığı kullanın:

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

Böyle bir sözde sınıf yok. Sadece kullanabileceğiniz zaman olması gerekmiyor :not(:hover). Tüm amacı :not()sözde sınıfının bir unsur sadece eşler veya sözde sınıfı aynı olamaz mevcut her (ve gelecekteki) dinamik sözde sınıfın ayrı müzakerelerine belirtmek zorunda kalmadan yazma negations yazarları sağlamaktır.

Örneğin, sadece bazı unsurlar da olabilir :enabledya da :disabled- en unsurlardır ne semantik basitçe geçerli değildir çünkü - ama bir eleman sadece ya (işaretleme cihazı vasıtasıyla belirlenebilir :hover), ya da değil ( :not(:hover)). Kullanılarak halihazırda doğrudan elde edilebilecek olumsuzlukların sağlanması :not(), yararlılığını büyük ölçüde zayıflatacaktır (yine de başka herhangi bir basit seçiciyi veya yolun sonundaki karmaşık seçicilerin tamamını reddetmek için kullanılabilir ).

Böyle bir sözde sınıfın hesaplama açısından daha ucuz olacağı argümanı oldukça zayıftır. Böylesi bir sözde sınıfın en saf uygulaması, :not(:hover)daha iyi olmayacak şekilde birebir kontrol olacaktır. Daha karmaşık veya optimize edilmiş uygulamalar ve satıcılardan :not(:hover), basamaklı ve :not(:hover)(için basamaklı bir seçenek olmadığında) kolayca erişebilirsiniz. % 100 işlevsel olarak eşdeğer olan (ve en azından için geçerli olan) en az bir başka mevcut yönteme bir alternatif belirleme, uygulama ve test etme zamanını ve çabasını haklı çıkarmaz.Senaryoların% 80'i). Ayrıca böyle sözde bir sınıfa isim verme meselesi de var - onun için bir isim önermediniz ve iyi bir tane de düşünemiyorum. :not-hoveryalnızca iki bayt kadar kısadır ve yazmak için çok az çalışma gerektirir. Bir şey varsa, potansiyel olarak daha kafa karıştırıcıdır :not(:hover).

Özgüllük konusunda endişeleniyorsanız , :not()sözde sınıfın kendisinin özgüllük için sayılmadığını unutmayın ; yalnızca en özel argümanıdır . :not(:hover)ve :hovereşit derecede spesifiktir. Yani özgüllük de bir sorun değil.

Tarayıcı desteği konusunda endişeleriniz varsa, böyle bir sözde sınıf, tanıtılırsa, :not()CSS2'de görünmediğinden ( :hoverilk olarak 17 yıldan daha uzun süredir tanıtıldığı) Selektörlerin yanında veya daha sonraki bir düzeyinde tanıtılmış olabilir. önce ve ilk olarak IE4'te bir yıl daha önce uygulandı). Bunu daha sonraki bir seviyede tanıtmak anlamsız olacaktır çünkü yazarlar, :not(:hover)tarayıcılar bu yeni sözde sınıfı yine de uygulamaya başlayana kadar kullanmaya devam etmek zorunda kalacaklar ve geçiş yapmak için hiçbir nedenleri olmayacaktı.

Bu devletler vs olaylar bahsediyor aşağıdaki soruya, aynı değildir (yaklaşık aslen olduğunu Not :focusziyade :hover: ama aynı ilke geçerlidir) mu CSS bir var: bulanıklık seçici (sözde sınıfı)?

Yalnızca başka bir şeyin üzerine geldiğinizde bir şey görüntülemek istiyorsanız, şunu kullanabilirsiniz:

selector:not(:hover)

bunun gibi:

section{
   font-size:3em;
}

div:not(:hover) + section{
 display:none;
}

<div>Hover on me</div>

<section>Peek A Boo!</section>

Kullanırken aklınızda bulundurmanız gereken birkaç olağandışı etki ve sonuç vardır :not():

• :not(:not(...)), :not(p::before)Mümkün değildir
• :not(*) belli ki asla uygulanmaz
• :not(.foo)ve .foogibi etiketler dahil olmayan her şeyle eşleşecek<HTML><body>
• bir kuralın özgüllüğünü artırır, örneğin: #foo:not(#bar)basit olanla aynı öğeyle eşleşir #foo, ancak daha yüksek özgüllüğü vardır.

andile operasyon :not:

• Öğe olmayan <div>ve olmayan <span>öğeler: body :not(div):not(span){}

orile operasyon :not, bu henüz tam olarak desteklenmiyor.

• Olmayan .crazyveya olmayan öğeler .fancy:body :not(.crazy, .fancy){}

Kaynak MDN

a {
  /*styles*/
} 

normaldir (üzerine gelmeyen bağlantı)

a:hover {
  /*styles*/
} 

gezdirilmiş bir bağlantıdır