为什么这个 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>' 范围内 class 突出显示。

我的问题： 为什么这个 CSS 不起作用？这确实是个好办法，但好像还没有发明这种东西？为什么？我应该使用 JavaScript 吗？我不想。我想要 CSS 方式。

感谢任何形式的帮助。

Answer 1

对于纯 CSS，您不能使用嵌套选择器。

您可以使用 Sass、PostCSS、Less...

等预处理器来完成

如果你只想使用 CSS 你必须使用这样的东西：

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

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

Answer 2

您不需要使用 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 3

不确定

  .Qtick{
            background-color: green;
        }

是为了...

如果你想改变颜色这样做：

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

    }

如果您只希望跨度成为荧光笔，请使用以下选择器：

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

}

为什么这个 CSS 无效？

Why this CSS not valid?

css

dhtml