Jagan K Jagan K - 1 month ago 5x
jQuery Question

Simple Rating System using CSS/jQuery

I am trying to build a rating system using css & jQuery.


<ul id="ratecv">
<li id="star1" class="star starred"></li>
<li id="star2" class="star"></li>
<li id="star3" class="star"></li>
<li id="star4" class="star"></li>
<li id="star5" class="star"></li>

If a list item with the class star is hovered all the list items above should be applied a class "starred",
if a user leaves without clicking on any of the list item. all the "starred" classes that are applied previously should be removed.

if a user clicks on particular star all the classes "starred" should remain.

it's a simple rating system i am trying to do using jquery

I am trying to use mouseenter, mouseleave, parents() methods, but i can't make this work,

Any Ideas


It's not what raty can do, but based on your code, you can get this :


.star:hover, .star.starred, .star.current {
    background-position: -200px 0;

JS :

$('#ratecv li.current').prevAll(".star").addClass("current");

$('#ratecv li').mouseenter(function () {

$('#ratecv li').mouseleave(function () {
    $('#ratecv .starred').each(function () {

$('#ratecv li').click(function () {
    $('#ratecv li.current').removeClass("current");

Fiddle : http://jsfiddle.net/naZ9u/3/