Warum ist dieses CSS nicht gültig?

Question

Ich habe diese CSS:

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

Mein HTML:

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

Mein Ziel: Mein Ziel ist es, wenn der Benutzer die Maus über die <a> die Spanne mit Klasse schwebt innerhalb der '<a>' hervorgehoben werden.

MY Frage: Warum dieses CSS nicht funktioniert? Das ist in der Tat gut, aber scheint so etwas nicht erfunden worden zu sein? Warum? Sollte ich JavaScript verwenden? Ich will nicht. Ich möchte es in CSS-Weise.

Jede Art von Hilfe wird geschätzt.

Answer 1

Sie benötigen kein JavaScript. Sie können es mit CSS nur auf sehr einfache Weise lösen. Sehen Sie im folgenden Code-Schnipsel:

.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

Mit einfachem CSS können Sie geschachtelte Selektoren nicht verwenden.

Sie können es eine Pre-Prozessor wie Sass mit, PostCSS, Less ...

Wenn Sie CSS verwenden nur Sie, so etwas verwenden:

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

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

Answer 3

nicht sicher, was

.Qtick{ 
      background-color: green; 
     } 

ist für ...

wenn Sie die Farbe ändern möchten dies tun wird:

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

    } 

wenn Sie nur die Spanne mögen folgenden Selektor seinen Textmarker verwenden:

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

}