Pure CSS rating widget

HTML

<div class="star-wrapper">
    <div class="star">
        <img src="http://i.stack.imgur.com/AtiAi.png" alt="" />
    </div>
    <div class="star">
        <img src="http://i.stack.imgur.com/AtiAi.png" alt="" />
    </div>
    <div class="star">
        <img src="http://i.stack.imgur.com/AtiAi.png" alt="" />
    </div>
    <div class="star">
        <img src="http://i.stack.imgur.com/AtiAi.png" alt="" />
    </div>
    <div class="star">
        <img src="http://i.stack.imgur.com/AtiAi.png" alt="" />
    </div>
</div>

CSS

.star-wrapper {
    width: 180px;
    height: 40px;
    border: 1px solid #ccf;
}
.star {
    width: 35px;
    height: 30px;
    overflow: hidden;
    float: left;
}
.star img {
    height: 30px;
}
.full img {
    margin-left: -40px;
}

JavaScript

$(function () {
    var estrelas = $('.star');
    var escolhida = 0;

    function repaint(e) {
        var indice = $(this).index() + 1;
        if (e.type == 'click') escolhida = indice;
        estrelas.removeClass('full');
        var upTo = $(this).hasClass('star-wrapper') ? escolhida : indice;
        estrelas.slice(0, upTo).addClass('full');
    }

    $('.star-wrapper').on('mouseleave', repaint);
    estrelas.on('mouseenter mouseleave click', repaint);
});