Звездный рейтинг на чистом CSS

Предлагаю простую реализацию звездного рейтинга с ховер-эффектом для последующей привязки 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;
}