| 序z-index，再把hover的样式用背景定位的方法来实现鼠标悬停后不同的背景切换，正因为我们已经把z-index的顺序都定义好了，所以才会形成不同宽度的a标签的遮盖，就是评分的效果了。
再看下CSS：
.star-rating,.star-rating a:hover,.star-rating a:active,.star-rating a:focus,.star-rating .current-rating{background:url(star.gif) left -1000px repeat-x;}
.star-rating{position:relative;width:125px;height:25px;overflow:hidden;list-style:none;margin:0;padding:0;background-position:left top;}
.star-rating li{display:inline;}
.star-rating a,.star-rating .current-rating{position:absolute;top:0;left:0;text-indent:-1000em;height:25px;line-height:25px;outline:none;overflow:hidden;border:none;}
.star-rating a:hover,.star-rating a:active,.star-rating a:focus{background-position:left bottom;}
.star-rating a.one-star{width:20%;z-index:6;}
.star-rating a.two-stars{width:40%;z-index:5;}
.star-rating a.three-stars{width:60%;z-index:4;}
.star-rating a.four-stars{width:80%;z-index:3;}
.star-rating a.five-stars{width:100%;z-index:2;}
.star-rating .current-rating{z-index:1;background-position:left center;}
/* for an inline rater */
.inline-rating{display:-moz-inline-block;display:-moz-inline-box;display:inline-block;vertical-align:middle;}
/* smaller star */
.small-star{width:50px;height:10px;}
.small-star,.small-star a:hover,.small-star a:active,.small-star a:focus,.small-star .current-rating{background-image:url(star_small.gif);line-height:10px;height:10px;}
这个效果懂得人理解起来就非常方便，不懂的人是需要费些时间来理解，就像我是费了些时间来理解。 |
