我有这个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方式。
感谢任何形式的帮助。
答案 0 :(得分:3)
您不需要使用JavaScript。您只能以非常简单的方式使用CSS解决它。请参阅以下代码段:
.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;
答案 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;
}