Предлагаю простую реализацию звездного рейтинга с ховер-эффектом для последующей привязки ajax голосования.
Пример:
<div class="rating">
<div class="stars">
<div class="on" style="width: 88%;"></div>
<div class="live">
<span data-rate="1"></span>
<span data-rate="2"></span>
<span data-rate="3"></span>
<span data-rate="4"></span>
<span data-rate="5"></span>
</div>
</div>
</div>
.rating .stars {
position: relative;
display: block;
float: left;
height: 20px;
width: 105px;
background-image: url("../img/stars.png");
background-position: 0 0;
background-repeat: repeat-x;
margin-right: 5px;
}
.rating .stars .on {
height: 20px;
background-image: url("../img/stars.png");
background-position: 0 -20px;
}
.rating .stars .live {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.rating .stars .live span {
display: block;
float: left;
cursor: pointer;
width: 21px;
height: 20px;
background-image: url("../img/stars.png");
background-repeat: no-repeat;
background-position: 0 -20px;
}
.rating .stars .live span:hover ~ span {
background-position: 0 0px;
}
.rating .stars .live:hover {
opacity: 1;
}