stars.css

.stars {
    position: relative;
    font-size: 20px;
}

.stars.big
{
    font-size: 40px !important;
}
.stars .rate:after,
.stars:before, .stars:after {
    content: "\2605\2605\2605\2605\2605";
}
.stars:before {
    color: #bbb;
}

.stars .rate {
    opacity: 0;
    display: inline-block;
    position: absolute;
    left: 0;
    width: 100%;
}

.rate[data-rating='1'] { width: 20%; }
.rate[data-rating='2'] { width: 40%; }
.rate[data-rating='3'] { width: 60%; }
.rate[data-rating='4'] { width: 80%; }
.rate[data-rating='5'] { width: 100%; }

.stars .rate:after {
    width: 100%;
}

.stars .rate:after,
.stars:after {
    position: absolute;
    left: 0;
    color: gold;
    overflow: hidden;
    text-shadow: 0 1px 0 goldenrod;
}

.stars:hover .rate {
    cursor: pointer;
}

.stars .rate:hover {
    opacity: 1;
}

stars.html

<span class="stars" data-rating="3.5"></span>

stars.js

//region star rating
var addRule = (function (sheet) {
    if(!sheet) return;
    return function (selector, styles) {
        if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
        if (sheet.addRule) return sheet.addRule(selector, styles);
    }
}(document.styleSheets[document.styleSheets.length - 1]));

var i = 51;
while (i--) {
    if(i % 10 === 0)
        addRule("[data-rating='" + i/10 + ".0']:after", "width:" + 2*i + "%");
    addRule("[data-rating='" + i/10 + "']:after", "width:" + 2*i + "%");
}

$(document).on('click', '.stars .rate', function () {
    var $star = $(this).parent();
    $star.attr('data-rating', $(this).attr('data-rating'));
    $.getJSON('/rating/rate', {id: $star.attr('data-id'), rate: $(this).attr('data-rating')}, function (data) {
        if (data.rating)
            $star.attr('data-rating', data.rating);
    });
    console.log('voted for ' + $star.attr('data-id') + ' with ' + $(this).attr('data-rating'))

});

$(document).on('mouseenter', '.stars', function () {
    if (!$(this).find('.rate').length) {
        for (var i = 1; i <= 5; ++i)
            $(this).append('<span class="rate" data-rating="' + i + '" style="z-index:' + (100 - i) + '"> </span>');
    }
});