Bu CSS neden geçerli değil?

Question

bu CSS var:

.optionQuiz a:hover{ 
     .Qtick{ 
      background-color: green; 
     } 
    } 

Benim HTML:

<div class="optionQuiz"> 
<a href="#"> 
<span class="Qtick">1</span> 
</a> 
</div> 

Benim HEDEF: kullanıcı <a> sınıfla açıklık üzerine fare geldiğinde My Goal olduğunu vurgulanmak için '<a>' içinde.

MY Soru: Neden bu CSS çalışmadı? Bu gerçekten iyi bir yol ama böyle bir şey icat edilmemiş gibi görünüyor? Niye ya? JavaScript kullanmalı mıyım? Ben istemiyorum. Ben CSS yolunda istiyorum.

Her türlü yardım için teşekkür ederiz.

Answer 1

JavaScript kullanmanıza gerek yoktur. CSS ile sadece çok basit bir şekilde çözebilirsiniz.

.optionQuiz a:hover .Qtick { 
 
    background-color: green; 
 
} 
 
.optionQuiz a:hover .other1 { 
 
    background-color: blue; 
 
} 
 
.optionQuiz a:hover .other2 { 
 
    background-color: yellow; 
 
}

<div class="optionQuiz"> 
 
    <a href="#"> 
 
    <span class="Qtick">1</span> 
 
    <span class="other1">2</span> 
 
    <span class="other2">3</span> 
 
    </a> 
 
</div>

Answer 2

Düz CSS'de iç içe geçmiş seçicileri kullanamazsınız.

a:hover span.Qtick{ 
 
    color:red; 
 
}

<div class="optionQuiz"> 
 
<a href="#"> 
 
<span class="Qtick">1</span> 
 
</a> 
 
</div>

:

Sen Sass, PostCSS, Az gibi bir ön işlemci kullanarak bunu yapabilirsiniz ...

sadece kullanmak istiyorsanız

böyle bir şey kullanmak zorunda CSS

Answer 3

emin değil misiniz rengini değiştirmek istiyorsanız yapacağız için ...

.Qtick{ 
      background-color: green; 
     } 

ne:

aşağıdaki ön bilgi

.optionQuiz a:hover{ 
      background-color: green; 

    } 

Eğer vurgulayıcı aşağıdaki seçiciyi kullanabilirsiniz olmanın tek yayılma istiyorsanız

: Bu css olmadığından

.optionQuiz a:hover >span.Qtick{ 
     background-color: green; 

}