jQuery/css: selected amount of stars to light up

Question

I'm working on making a star-voting system. There are 5 stars, those lighted up are showing the current average star voted. When you mouseover a star, lets say number 4 I wish to make the 4 from right lighten up, if you mark over 2, 2 stars should mark up from the right and so on.. if full 5 stars all stars lights up. the stars are in css classes .iconFavorite and the lighten up is .iconFavorite_hover, so my code looks like this when 3:

<div class="iconFavorite_hover"></div>
<div class="iconFavorite_hover"></div>
<div class="iconFavorite_hover"></div>
<div class="iconFavorite"></div>
<div class="iconFavorite"></div>

If you check out retardo.dk/videos.php?id=905 you can see the big green stars try mouseover them, the selected amount of stars will light up.

How can I do this?

Here's a jsfiddle of my current code with no jquery: http://jsfiddle.net/8vzCC/1/

Answer 1

Here is a working example: Fiddle You will need a third class for "permanent" light up stars.

here is the jquery to make it work.

$(function() {
    $('.icon').mouseover(function() {
        $(this).addClass('iconFavorite_hover');
        $(this).prevAll('.icon').addClass('iconFavorite_hover');
    });
    $('.icon').mouseout(function() {
        $(this).removeClass('iconFavorite_hover');
        $(this).prevAll('.icon').removeClass('iconFavorite_hover');
    });
});

To provide the extra functionality you are looking for I made some changes: Updated fiddle You can see there is a new class and extra hover changes.

Answer 2

Can't you give all the div's an ID? And then let jQuery do somthing like: On hover --> this.id --> select every div with id lower or equal to 'this.id' --> set class="IconFavorite_Hover" ?

Answer 3

$(".iconFavorite").onmouseover(function(){

        $(this).prevAll(".iconFavorite").add(this).addClass(".iconFavorite-hover").removeClass(".iconFavorite");
        $(this).nextAll(".iconFavorite-hover").addClass(".iconFavorite").removeClass(".iconFavorite-hover");

}).onmouseout(function(){
    $(".iconFavorite-hover").addClass(".iconFavorite").removeClass(".iconFavorite-hover");
});

This removes the hover class from the next stars as well (so if they initially moused over the 4th star, and then went to the 2nd, the 3rd and 4th stars should not be highlighted

Answer 4

Does this work? http://jsfiddle.net/8vzCC/33/ It removes everything after it :) This should work!

EDIT: New version, should work as you want it to work :)