css - 为什么这个 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>