如何用纯CSS写星级评分的功能，代码是什么

发布时间：2023-10-09 10:02:15 所属栏目：语言来源：

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!