css - 模仿 :hover css using a css class

Question

我有一系列用于创建“星级”输入的 div。通常星星是灰色的，当鼠标经过其中一颗星星时，星星会填充一种颜色，这表明它正在工作。

现在我想要一个“模仿”:hover 行为的类，我称它为 active，所以当我放置该类时，星星会填充颜色，但这是行不通的。

这里是代码:

HTML

<span class="rating">
 <span class="star active"></span>
 <span class="star"></span>
 <span class="star"></span>
 <span class="star"></span>
 <span class="star"></span>
</span>

CSS

.rating span.star:before {
    content: "\f005";
    padding-right: 5px;
    color: #bbb;
}

.rating span.star:hover:before, .rating span.star.active, .rating span.star:hover ~ span.star:before {
    color: #ffbe0d;
}

这是 fiddle :http://jsfiddle.net/fuTfX/

我正在使用 FontAwesome 来显示星星

Answer 1

您忘记将 :before 添加到 .active 规则。改变

.rating span.star:hover:before, .rating span.star.active, .rating span.star:hover ~ span.star:before {
    color: #ffbe0d;
}

到

.rating span.star:hover:before, .rating span.star.active:before, .rating span.star:hover ~ span.star:before {
    color: #ffbe0d;
}