ayarlayın: hover sınıfa

Question

dayalı Aşağıdaki HTML vardır:

<div class="menu"> 
    <a class="main-nav-item" href="home">home</a> 
    <a class="main-nav-item-current" href="business">business</a> 
    <a class="main-nav-item" href="about-me">about me</a> 
</div> 

CSS, ben belirli bir renk için bu menü öğeleri için a:hover ayarlamak istiyorum. Bu yüzden yazma: Ben sadece sınıfta ana-nav maddelik değil ana-nav maddelik akım olanlar <a> etiketleri için bu a:hover rengini ayarlamak istediğiniz,

.menu a:hover 
{ 
    color:#DDD; 
} 

Ama çünkü farklı bir renge sahip ve vurgulu olarak değişmemelidir. menüsü div içindeki <a> etiketlerinin tümü, geçerli sınıfının dışındaki hoverda rengi değiştirmelidir.

Bunu CSS kullanarak nasıl yapabilirim?

Ben ana-nav maddelik sınıfı ile sadece onlar Üzerine giderek rengini değiştirmek, ve o an ki düşünme

.menu a:hover .main-nav-item 
{ 
    color:#DDD; 
} 

gibi bir şey denedik. Ama bu çalışmıyor. Bu tarayıcının yapar bu şekilde okumak için önemlidir nasıl çalıştığını anlamak için

.menu a.main-nav-item:hover { } 

:

Answer 1

bu deneyin. a öğeyi tanımlar, öğesi, öğesini yalnızca bu sınıfa sahip olanlar olarak nitelendirir ve son olarak da psuedo sınıfı :hover, daha önce gelen nitelikli ifadeye uygulanır.

Temel olarak bu kadar aşağı kaynar:

sınıfa menu ile herhangi bir elementin soyundan çocuksun sınıfın main-nav-item tüm ankraj elemanlarına bu vurgulu kuralı uygulayın.

Answer 2

Basamak sizi ısırıyor.

.menu > .main-nav-item:hover 
    { 
     color:#DDD; 
    } 

Bu kod ana-nav-öğenin bir sınıf var VE sınıf menüsünün çocuklardır tüm bağlantıları kapmak için söylüyor ve onlar süpürdü zaman renk #DDD geçerlidir: Bu deneyin.

Answer 3

Yaygın bir hata, sınıf adlarından önce bir boşluk bırakıyor. Bu doğru sözdizimi olsa bile, hiçbir zaman işe yaramazdı:

.

Bu nedenle, bu

Answer 4

olacağını

.menu a .main-nav-item:hover 

yazmak olmaz:

a.main-nav-item:hover { } 

Answer 5

sadece deneyebilirsiniz düşük özgüllüğü tutar konusunda .main-nav-item:hover

.menu a.main-nav-item:hover