为什么这个CSS无效?

时间:2016-04-07 08:10:01

标签: css3 dhtml

我有这个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方式。

感谢任何形式的帮助。

3 个答案:

答案 0 :(得分:3)

您不需要使用JavaScript。您只能以非常简单的方式使用CSS解决它。请参阅以下代码段:

&#13;
&#13;
.optionQuiz a:hover .Qtick {
  background-color: green;
}
.optionQuiz a:hover .other1 {
  background-color: blue;
}
.optionQuiz a:hover .other2 {
  background-color: yellow;
}
&#13;
<div class="optionQuiz">
  <a href="#">
    <span class="Qtick">1</span>
    <span class="other1">2</span>
    <span class="other2">3</span>
  </a>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

使用纯CSS,您无法使用嵌套选择器。

你可以使用像Sass,PostCSS,Less ...

这样的预处理器来实现

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

a:hover span.Qtick{
  color:red;
}
<div class="optionQuiz">
<a href="#">
<span class="Qtick">1</span>
</a>
</div>

答案 2 :(得分:0)

不确定是什么

  .Qtick{
            background-color: green;
        }

是......

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

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

    }

如果您只希望跨度为高亮显示,请使用以下选择器:

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

}