Add multiple hover based styles

Question

I currently have the following HTML layout :

<!-- start stars -->
<span class="spr-starratings spr-review-header-starratings" style="margin-left: 20px;">
    <i class="spr-icon spr-icon-star"></i>
    <i class="spr-icon spr-icon-star"></i>
    <i class="spr-icon spr-icon-star"></i>
    <i class="spr-icon spr-icon-star"></i>
    <i class="spr-icon spr-icon-star"></i>
</span>
<!-- end stars -->

For instance; if 4 is <i>frozen, I want the first 3 plus 1 to dynamically add CSS color: #f2d253;, and then, removing the cursor from this star, I want it to be reset styles.

I would like to do this using jQuery if possible?

Any point in the direction will be appreciated; example will be highly appreciated

Answer 1

This can also be done using pure CSS: http://jsfiddle.net/4rpw7/ .

HTML:

<span>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
</span>

CSS

span {
    display: inline-block;
    outline: 1px solid red;
    padding: 5px;
}

span > i {
    float: right;
    height: 20px;
    width: 20px;
    outline: 1px solid blue;
    cursor: pointer;
}

span > i:not(:last-child) {
    margin-left: 10px;
}

span > i:hover, span > i:hover ~ i {
    background-color: blue;
}

Answer 2

prevAll() - http://api.jquery.com/prevall/

Answer 3

: http://jsfiddle.net/Bhq2j/

CSS

i.highlight { color: #f2d253; }

Jquery:

$('i').hover(
    function(){
        var prev = $(this).prevAll();
        $(this).add(prev).addClass('highlight');
    }, function() {
        $('i').removeClass('highlight');
});