纯CSS星级评价

核心提示：做一个星级评价的功能不是很难，但是要单纯用CSS写估计就有点难度了，纯CSS星级评价，先来个截图：效果很简单，可能现在您现在脑子里已经有实现的思路了，下面先看一下我们通常情况下的实现方法：CSS：代码 .jsstar{ list-style: none;margin: 0px;padding: 0px;width: 1

做一个星级评价的功能不是很难，但是要单纯用CSS写估计就有点难度了，先来个截图：



效果很简单，可能现在您现在脑子里已经有实现的思路了。下面先看一下我们通常情况下的实现方法：

CSS：

代码
　　　　　.jsstar
　　　　{　 list-style: none;
　　　　　　margin: 0px;
　　　　　　padding: 0px;
　　　　　　width: 100px;
　　　　　　height: 20px;
　　　　　　position: relative;
　　　　　　
　　　　　　}
　　　　 .jsstar li　
　　　　 {
　　　　　　padding:0px;
　　　　　　margin: 0px;
　　　　　　float: left;
　　　　　　width:20px;
　　　　　　height:20px;
　　　　　　background:url(star_rating.gif) 0 0 no-repeat;
　　　　　　}　


HTML：

<p>javascript + CSS实现</p>
<ul class="jsstar">
　　<li title="一星"></li>
　　<li title="二星"></li>
　　<li title="三星"></li>
　　<li title="四星"></li>
　　<li title="五星"></li>
</ul>
JS：（我用的是jquery）

<script type="text/Javascript" src="jquery-1.3.1.js"></script>

　　<script type="text/javascript">
　　$(document).ready(function(){
　　　　$(".jsstar >li").hover(
　　　　　　function(){$(this).css({"background-position":"left bottom"}).PRev().trigger("mouSEOver")},
　　　　　　function(){$(this).css({"background-position":"left top"}).prev().trigger("mouseout")})
　　　　.click(function(){alert($(this).attr("title"))});　　 
　　});
　　</script>
这里是效果图：



是不是和上面的没什么区别，可是又一想如果用户禁掉了javascript岂不是效果很惨？

于是我们想到了用纯CSS实现，下面是代码：

CSS：

代码
1 /*CSS Star start*/
2　　　　 .star-rating
3　　　　 {
4　　　　　　 list-style: none;
5　　　　　　 margin: 0px;
6　　　　　　 padding: 0px;
7　　　　　　 width: 100px;
8　　　　　　 height: 20px;
9　　　　　　 position: relative;
10　　　　　　 background: url(star_rating.gif) top left repeat-x;
11　　　　 }
12　　　　 .star-rating li
13　　　　 {
14　　　　　　 padding: 0px;
15　　　　　　 margin: 0px;
16　　　　　　 float: left;
17　　　　 }
18　　　　 .star-rating li a
19　　　　 {
20　　　　　　 display: block;
21　　　　　　 width: 20px;
22　　　　　　 height: 20px;
23　　　　　　 text-decoration: none;
24　　　　　　 text-indent: -9000px;
25　　　　　　 z-index: 20;
26　　　　　　 position: absolute;
27　　　　　　 padding: 0px;
28　　　　 }
29　　　　 .star-rating li a:hover
30　　　　 {
31　　　　　　 background: url(star_rating.gif) left bottom;
32　　　　　　 z-index: 1;
33　　　　　　 left: 0px;
34　　　　 }
35　　　　 .star-rating a.one-star
36　　　　 {
37　　　　　　 left: 0px;
38　　　　 }
39　　　　 .star-rating a.one-star:hover
40　　　　 {
41　　　　　　 width: 20px;
42　　　　 }
43　　　　 .star-rating a.two-stars
44　　　　 {
45　　　　　　 left: 20px;
46　　　　 }
47　　　　 .star-rating a.two-stars:hover
48　　　　 {
49　　　　　　 width: 40px;
50　　　　 }
51　　　　 .star-rating a.three-stars:hover
52　　　　 {
53　　　　　　 width: 60px;
54　　　　 }
55　　　　 .star-rating a.three-stars
56　　　　 {
57　　　　　　 left: 40px;
58　　　　 }
59　　　　 .star-rating a.four-stars
60　　　　 {
61　　　　　　 left: 60px;
62　　　　 }
63　　　　 .star-rating a.four-stars:hover
64　　　　 {
65　　　　　　 width: 80px;
66　　　　 }
67　　　　 .star-rating a.five-stars
68　　　　 {
69　　　　　　 left: 80px;
70　　　　 }
71　　　　 .star-rating a.five-stars:hover
72　　　　 {
73　　　　　　 width: 100px;
74　　　　　　 
75　　　　 }


HTML：



<ul class='star-rating'>
　<li><a href='#' title='一星' class='one-star'>1</a></li>
　<li><a href='#' title='二星' class='two-stars'>2</a></li>
　<li><a href='#' title='三星' class='three-stars'>3</a></li>
　<li><a href='#' title='四星' class='four-stars'>4</a></li>
　<li><a href='#' title='五星' class='five-stars'>5</a></li>
</ul>
看看上面CSS的行号您是不是吓了一跳，这么简单的效果竟然用了这么多代码？在我看来不用JS就只能一个效果一个样式了，如果您还有更简单更炫的效果请指教！