纯CSS星级评价

做一个星级评价的功能不是很难，但是要单纯用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就只能一个效果一个样式了，如果您还有更简单更炫的效果请指教！

示例代码下载

 

转载于:https://www.cnblogs.com/gudao119/archive/2010/01/13/1646428.html