Почему этот CSS недействителен?

Question

У меня есть этот CSS:

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

Мой HTML:

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

Моя цель: Моя цель, когда пользователь наводит курсор на <a> пролете с классом в пределах '<a>' для выделения.

МОЙ вопрос: Почему этот CSS не работает? Это действительно хороший способ, но похоже, что это не было изобретено? Зачем? Должен ли я использовать JavaScript? Я не хочу. Я хочу это в CSS.

Любые виды помощи приветствуются.

Answer 1

Вам не нужно использовать JavaScript. Вы можете решить это с помощью CSS только очень простым способом. Смотрите следующий фрагмент кода:

.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

С помощью простого CSS вы не можете использовать вложенные селектора.

Вы можете сделать это с помощью препроцессора, как Sass, PostCSS, Less ...

Если вы хотите использовать только CSS, вы должны использовать что-то вроде этого:

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

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

Answer 3

Не уверен, что

.Qtick{ 
      background-color: green; 
     } 

для ...

, если вы хотите изменить цвет это будет делать:

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

    } 

если вы хотите только пядь быть фломастер с помощью следующей селектор:

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

}