Pourquoi ce CSS n'est pas valide?

Question

J'ai ce CSS:

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

Mon HTML:

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

Mon objectif: Mon but est lorsque l'utilisateur passe la souris sur la <a> la durée avec classe au sein du '<a>' pour être surligné.

MY Question: Pourquoi CSS ne fonctionne pas? C'est en effet une bonne manière mais semble qu'une telle chose n'a pas été inventée? Pourquoi? Devrais-je utiliser JavaScript? Je ne veux pas. Je le veux de manière CSS.

Toute sorte d'aide est appréciée.

Answer 1

Vous n'avez pas besoin de JavaScript. Vous pouvez le résoudre avec CSS seulement d'une manière très simple. Voir l'extrait suivant:

.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

Avec CSS simple, vous ne pouvez pas utiliser de sélecteurs imbriqués.

Vous pouvez le faire en utilisant un pré-processeur comme Sass, PostCSS, Moins ...

Si vous souhaitez simplement utiliser CSS, vous devez utiliser quelque chose comme ceci:

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

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

Answer 3

Je ne sais pas ce que

.Qtick{ 
      background-color: green; 
     } 

est pour ...

si vous voulez changer la couleur cela va faire:

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

    } 

si vous souhaitez que la durée d'être surligneur utiliser le sélecteur suivant:

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

}