如何用纯CSS写星级评价的功能，代码是什么-群英

上一篇：如何利用CSS3完成按椭圆轨迹旋转的效果下一篇：CSS3自定义滚动条样怎样实现的，包括哪些部分

很多朋友都对“如何用纯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就只能一个效果一个样式了，如果您还有更简单更炫的效果请指教！

以上就是关于“如何用纯CSS写星级评价的功能，代码是什么”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。