CSS:

 1 #score1 i {
 2     vertical-align: middle;
 3     display: inline-block;
 4     width: 32px;
 5     height: 32px;
 6     background: url(‘圖片地址‘) no-repeat center center;
 7     background-size: cover;
 8 }
 9 
10 #score1 i.on {
11     background-image: url(‘圖片地址‘);
12 }

HTML：

1 <span id="score1">
2     <i></i><i></i><i></i><i></i><i></i>
3 </span>

JavaScript：

 1     /**
 2      * [score 評分]
 3      * @param  {[String]} scoreId   [評分Id]
 4      * @param  {[String]} extentStr [需要變成實體的星星的樣式class]
 
 5      * $(scoreId).val()　　[訪問分數]
 6      */
 7     function score(scoreId, extentStr) {
 8 
 9         scoreId = "#" + scoreId;
10 
11         $(scoreId + " i").hover(function() { // 鼠標移入，未確定選擇分數時
12 
13             for (var i = 0; i <= $(this).index(); i++) {
14 
15                 $(scoreId + " i").eq(i).addClass(extentStr); //
 
 實星星
16 
17             }
18 
19             $(scoreId + " i").click(function() { // 點擊評分，確定好分數後無法更改
20 
21                 for (var i = 0; i <= $(this).index(); i++) {
22 
23                     $(scoreId + " i").eq(i).addClass(extentStr);
24 
25                 }
26                  
27                 $(scoreId).val($(this).index()+1);          
28 
29                 $(scoreId + " i").unbind(); // 清除移入移出
30 
31             });
32 
33         }, function() { // 鼠標移出
34 
35             $(scoreId + " i").removeClass(extentStr); // 描線星星
36 
37         });
38 
39     }
40 
41     score("score1", "on");

評分---五星好評