mimic :hover css using a css class

Question

I have a series of divs that I use to create a "star rating" input. Normally the stars are gray, when the mouse goes over one of the stars the stars fills with a color, and that it's working.

Now I want a class that "mimic" the :hover behaviour and I called it active so when I put that class the stars fills with the color, but that is not working.

Here the code:

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;
}

Here's the fiddle: http://jsfiddle.net/fuTfX/

I am using FontAwesome to display the stars

Answer 1

You forgot to add the :before to the .active rule. Change

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

To

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

Answer 2

Give this a try (I moved the color on :before to just the span):

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

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