Led Led - 6 days ago 5
CSS Question

Five star rating functionality

How can I achieve a five star rating functionality using css.

I have some html:

<span class="rate-this-stars">
<h5>Rate this page</h5>
<ol class="rate-this-stars-list">
<li class="star" value="5"></li>
<li class="star" value="4"></li>
<li class="star" value="3"></li>
<li class="star" value="2"></li>
<li class="star" value="1"></li>
</ol>
</span>


And some additional css which gives me this:

Rate this Page

I then have a css hover state which swaps the grey star with a pink star:

span.stars ol li:hover {
background-image: url(../images/starHover.png);
}


Output:

Rate this page with only one star

So obviously this will only effect the star I hover over. But I was wonder How would I be able to highlight star 1, 2, 3, and 4 when i hover over star 4. So highlight all the stars that trial the selected.

I also want to be able to keep the stars pink if a click event is triggered. I want to basically do this with css and no javascript.

My css skills are a bit rusty. Any suggestions on how to achieve this functionality.

Answer

I Got This

Javascript to get the ratings

$(document).ready(function() {
    $("form#ratingForm").submit(function(e) 
    {
        e.preventDefault(); // prevent the default click action from being performed
        if ($("#ratingForm :radio:checked").length == 0) {
            $('#status').html("nothing checked");
            return false;
        } else {
            $('#status').html( 'You picked ' + $('input:radio[name=rating]:checked').val() );
        }
    });
});

DEMO1

Using Css DEMO2

Comments