使用CSS绘制星级评分效果的方法

}   
ul.rating li a:hover {   
    z-index: 2;   
    width: 125px;   
    height: 19px;   
    overflow: hidden;   
    left: 0;   
    background: url(http://www.zjgsq.com/wp-content/uploads/2014/09/stars.png) no-repeat 0 0   
}   
ul.rating li.one a:hover {   
    background-position: 0 -19px;   
}   
ul.rating li.two a:hover {   
    background-position: 0 -38px;   
}   
ul.rating li.three a:hover {   
    background-position: 0 -57px  
}   
ul.rating li.four a:hover {   
    background-position: 0 -76px  
}   
ul.rating li.five a:hover {   
    background-position: 0 -95px  
}  

这样就基本实现了鼠标hover显示对应的星级，后面再增加点JS来实现click效果就可以啦

Demo