SOURCE

<div class="star">
    <input type="radio" name="item" id="item01" />
    <label class="star-item" for="item01" title="完美"></label>
    <input type="radio" name="item" id="item02"/>
    <label class="star-item" for="item02" title="很好"></label>
    <input type="radio" name="item" id="item03" />
    <label class="star-item" for="item03" title="一般"></label>
    <input type="radio" name="item" id="item04" />
    <label class="star-item" for="item04" title="很差"></label>
    <input type="radio" name="item" id="item05" />
    <label class="star-item" for="item05" title="垃圾"></label>
</div>

.star{
   display: inline-block;
   font-size: 0;
   direction:rtl
}
.star-item{
   display: inline-block;
   width: 20px;
   height:20px;
   cursor: pointer;
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ7yrpAAAAYFBMVEUAAAD92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92Un92UmCTPEWAAAAH3RSTlMA9iwe++hAgPLJo13i3Td8JO3Sk4xtYkYUC76cVBIjGgBFCwAAAMtJREFUKM+1kUkOhCAQRUEFBHGep67737JRlEFNJ73wbyAv9WtRD/1O3z/AqrqzDqC7spEAkPECGagwlwRJE28wbpJAk5xjcIJ5rmBBwAsp9nLpsvJYkMWWxRk6QrHZSJFJesIU2UQnjCwLwSQ0kG4zQmzzdmcCuA5VocaQGNiyQX8G1qK/8q6jNH1wtCx3RxwhfnUkM3Vs6ToSdNUDK52NI6JL+4R1JD/HYaXriOsP9xxN+p08R0JV1ZlnzxELRBSJIPccSe1IvufoCxGAFoLwSVOBAAAAAElFTkSuQmCC') center bottom no-repeat;
}
input[type="radio"]{
   position: absolute;
   clip: rect(0,0,0,0)
}
input[type="radio"]:checked~.star-item{
    background-position: center top;
}
.star:hover label.star-item{
   background-position: center bottom;
}
.star label.star-item:hover,
label.star-item:hover~.star-item{
   background-position: center top;
}