Bir kullanıcı fare sınıf adı olan öğenin üzerine geldiğinde arka plan rengi uygulamaya çalışıyorum "reMode_hover" .

Eleman Ama eğer rengini değiştirmek istemiyorum da vardır"reMode_selected"

Not: Ben sadece bir tür sınırlı bir ortamda çalışıyorum çünkü javascript değil CSS kullanabilirsiniz.

Açıklığa kavuşturmak için hedefim fareyle üzerine gelindiğinde birinci öğeyi renklendirmek, ikinci öğeyi renklendirmemek.

HTML

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

İlk tanımın işe yarayacağını umarak aşağıda denedim ama işe yaramadı. Neyi yanlış yapıyorum?

CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

.reMode_hover:hover 
{
   background-color: #f0ac00;
}

Bunun bir yolu, çoklu sınıf seçicisini kullanmaktır (torun seçici olduğu için boşluk yoktur):

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

Modern tarayıcılarda şunları yapabilirsiniz:

.reMode_hover:not(.reMode_selected):hover{}

Uyumluluk bilgileri için http://caniuse.com/css-sel3 adresine başvurun .

Yöntem 1

Senin koduyla sorun seçerek olmasıdır .remode_hoverbir olduğunu soyundan ait .remode_selected. Kodunuzun doğru şekilde çalışmasını sağlamanın ilk kısmı, bu alanı kaldırarak

.reMode_selected.reMode_hover:hover

Ardından, stilin çalışmaması için, tarafından ayarlanan stili geçersiz kılmanız gerekir :hover. Başka bir deyişle, background-colormülke karşı koymanız gerekir . Yani son kod

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

Vaktini boşa harcamak

Yöntem 2

:not()Başkaları tarafından belirtildiği gibi alternatif bir yöntem kullanmak olacaktır . Bu, parantez içinde belirtilen sınıf veya özelliğe sahip olmayan herhangi bir öğeyi döndürür. Bu durumda, .remode_selectedoraya koyardınız. Bu, sınıfı olmayan tüm öğeleri hedefler.remode_selected

Vaktini boşa harcamak

Ancak, CSS3'te tanıtıldığı için bu yöntemi tavsiye etmem, bu nedenle tarayıcı desteği ideal değildir.

Yöntem 3

Üçüncü yöntem jQuery kullanmak olacaktır. CSS'de .not()kullanılmaya benzer olan :not(), ancak çok daha iyi tarayıcı desteğiyle seçiciyi hedefleyebilirsiniz

Vaktini boşa harcamak