利用z-index和相对定位，自己看例子去琢磨：
/examples/star.html
HTML+CSS代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS实现星级评分</title>
<style type="text/css">
ul,li {margin:0; padding:0; list-style:none;}
#star {position:relative;width:95px;height:19px;overflow:hidden;}
#star li {display:inline;}
#star {background:url(images/star.png);}
#star_1,
#star_2,
#star_3,
#star_4,
#star_5,
#current {position:absolute; top:0; left:0; display:block; height:19px; text-indent:-9999px; outline:none;}
#current {background:url(images/star.png) 0 -19px;}
#star_1:hover,
#star_2:hover,
#star_3:hover,
#star_4:hover,
#star_5:hover {background:url(images/star.png) 0 -38px;}
#star_1 {width:20%; z-index:5;}
#star_2 {width:40%; z-index:4;}
#star_3 {width:60%; z-index:3;}
#star_4 {width:80%; z-index:2;}
#star_5 {width:100%; z-index:1;}
</style>
</head>
<body>
<h1>请评分(当前2.5分)：</h1>
<ul id="star">
<li><a href="#" title="当前得分：2.5分" id="current" style="width:50%;">当前得分：2.5分</a></li>
<li><a href="#" title="1分" id="star_1">1分</a></li>
<li><a href="#" title="2分" id="star_2">2分</a></li>
<li><a href="#" title="3分" id="star_3">3分</a></li>
<li><a href="#" title="4分" id="star_4">4分</a></li>
<li><a href="#" title="5分" id="star_5">5分</a></li>
</ul>
</body>
</html>
评论(3)
fox, 太懒了,代码都不弄出来,[face72]
谢谢啦,这个我拿走了“ 哈哈“`
不厚道呀