CODEWITHSUNDEEP
javascriptjquerycss
Karem
Karem

Reputation: 18103

jQuery/css: selected amount of stars to light up

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/

Upvotes: 2

Views: 753

Answers (4)

Milaan
Milaan

Reputation: 245

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 :)

Upvotes: 0

Jeremy B.
Jeremy B.

Reputation: 9216

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.

Upvotes: 1

questioner
questioner

Reputation: 775

$(".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

Upvotes: 0

Milaan
Milaan

Reputation: 245

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" ?

Upvotes: 0

Related Questions