用css实现星级评分效果

以前看到其他网站实现的实现的星级评分效果，没在意那么多，直到昨天做一个页面需要这个功能效果时，发现自己实现起来还是这么困难，折腾了半天才弄出来。

1. 其实主要是利用背景图片的切换位置来实现星级的效果，

2.分为三个层面，分别是空分层，分数层和打分层，我是用position：absolute;属性实现三个层面的定位；

3.利用链接中的a:hover属性设置背景图片来实现打分的效果；

4.为5个空链接层，定位，设置宽度（主要是控制图片的显示的个数），然后用z-index来定显示的不同顺序，使有的图层不会被遮掩。

主要实现的代码例子如下：

css代码：

<style type="text/css">
*{ margin:0; padding:0;}
.box{ width:400px; margin:10px auto;}
.listBox,.listBox .currentRating,.listBox a:hover,.listBox a:active,.listBox a:focus{ position:relative; background:url(images/star.gif) left top;}
.listBox{ position:relative; height:30px; width:150px; list-style:none; overflow:hidden; }
.listBox li{ display:inline; }
.listBox .currentRating,.listBox a{ position:absolute; left:0; top:0; height:30px; line-height:30px; text-indent:-9999px; display:block;}
.listBox a:hover,.listBox a:active,.listBox a:focus{ background-position: left center;}
.listBox a.one{ width:30px; z-index:5;}
.listBox a.two{ width:60px; z-index:4;}
.listBox a.three{ width:90px; z-index:3;}
.listBox a.four{ width:120px; z-index:2;}
.listBox a.five{ width:150px; z-index:1;}
.listBox .currentRating{ background-position:left bottom; width:50%; z-index:0;}
</style>

html代码：

<div class="box">
<ul class="listBox" >
<li class="currentRating">current</li>
<li ><a class="one" href="">1</a></li>
<li><a class="two" href="">1</a></li>
<li ><a class="three" href="">1</a></li>
<li><a class="four" href="">1</a></li>
<li ><a class="five" href="">1</a></li>
</ul>
</div>

效果：

第二种实现的方法。html代码如上：

css代码：

<style type="text/css">
* {
margin:0;
padding:0;
}
.box {
width:400px;
margin:10px auto;
}
.listBox, .listBox .currentRating, .listBox a:hover {
background:url(images/star.gif) left top;
}
.listBox {
position:relative;
height:30px;
width:150px;
list-style:none;
overflow:hidden;
}
.listBox li {
display:inline;
}
.listBox .currentRating {
position:absolute;
left:0;
top:0;
height:30px;
line-height:30px;
text-indent:-9999px;
display:block;
overflow:hidden;
border: none;
}
.listBox li a {
position:absolute;
left:0;
top:0;
height:30px;
line-height:30px;
text-indent:-9999px;
display:block;
overflow:hidden;
border: none;
width:30px;
z-index:20;
}
.listBox li a:hover {
background:url(images/star.gif) left center;
z-index:2;
left:0;
}
.listBox a.one {
left:0
}
.listBox a.one:hover {
width:30px;
}
.listBox a.two {
left:30px;
}
.listBox a.two:hover {
width:60px;
}
.listBox a.three {
left:60px;
}
.listBox a.three:hover {
width:90px;
}
.listBox a.four {
left:90px;
}
.listBox a.four:hover {
width:120px;
}
.listBox a.five {
left:120px;
}
.listBox a.five:hover {
width:150px;
}
.listBox .currentRating {
background-position:left bottom;
width:50%;
z-index:1;
}
</style>