非常漂亮的css星级效果总结第2/2页

<ul class="star-rating"> 
<li class="current-rating">Currently 3.5/5 Stars.</li> 
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li> 
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li> 
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li> 
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li> 
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li> 
</ul> 

<style> 
.star-rating{/*这里是空分层，用来显示空星星*/ 
list-style:none; 
margin: 0px; 
padding:0px; 
width: 150px; 
height: 30px; 
position: relative; 
background: url(star_rating2.gif) top left repeat-x;/*空星星位于背景图片的顶层，将其设为背景并横向平铺*/  
} 
.star-rating li{/*设置li的浮动属性*/ 
padding:0px; 
margin:0px; 
/*\*/ 
float: left; 
/* */ 
} 
.star-rating li a{/*设置a的布局为绝对布局和垂直坐标并隐藏a中文本使其成为空链接*/ 
display:block; 
width:30px; 
height: 30px; 
text-decoration: none; 
text-indent: -9000px; 
z-index: 20; 
position: absolute; 
padding: 0px; 
} 
.star-rating li a:hover{/*设置a:hover的背景图片为打分星/垂直坐标/left为0,注意垂直坐标一定要小于a的垂直坐标*/ 
background: url(star_rating2.gif) left center; 
z-index: 2; 
left: 0px; 
} 

/*以下5个class用来设置5个链接的位置和hover的宽度*/ 
.star-rating a.one-star{ 
left: 0px; 
} 
.star-rating a.one-star:hover{ 
width:30px; 
} 
.star-rating a.two-stars{ 
left:30px; 
} 
.star-rating a.two-stars:hover{ 
width: 60px; 
} 
.star-rating a.three-stars{ 
left: 60px; 
} 
.star-rating a.three-stars:hover{ 
width: 90px; 
} 
.star-rating a.four-stars{ 
left: 90px; 
}  
.star-rating a.four-stars:hover{ 
width: 120px; 
} 
.star-rating a.five-stars{ 
left: 120px; 
} 
.star-rating a.five-stars:hover{ 
width: 150px; 
} 

.star-rating li.current-rating{/*设置分数层的背景和宽度并隐藏文本*/ 
background: url(star_rating2.gif) left bottom; 
position: absolute; 
height: 30px; 
width:105px; 
display: block; 
text-indent: -9000px; 
z-index: 1; 
}  
</style>