Pure CSS star rating

It is not difficult to make a star rating function, but it is a bit difficult to write it simply using CSS. Let’s take a screenshot first:

The effect is very simple. Maybe you already have the idea of ​​​​implementing it in your mind. Let’s take a look at our usual implementation method:

CSS:

code
.jsstar
{ list-style: none;
margin: 0px;
padding: 0px;
width: 100px;
height: 20px;
position: relative;

}
.jsstarli
{
padding:0px;
margin: 0px;
float: left;
width:20px;
height:20px;
background:url(star_rating.gif) 0 0 no-repeat;
}

HTML:

<p>Javascript + CSS implementation</p>
<ul class="jsstar">
<li title="One Star"></li>
<li title="Two stars"></li>
<li title="Samsung"></li>
<li title="Four stars"></li>
<li title="five stars"></li>
</ul>
JS: (I use 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>
Here is the rendering:

Is it no different from the above, but then I think if the user disables javascript, wouldn’t the effect be very disastrous?

So we thought of using pure CSS to implement it. Here is the code:

CSS:

code
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-ratingli
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='One Star' class='one-star'>1</a></li>
<li><a href='#' title='two stars' class='two-stars'>2</a></li>
<li><a href='#' title='Samsung' class='three-stars'>3</a></li>
<li><a href='#' title='four-stars' class='four-stars'>4</a></li>
<li><a href='#' title='五星' class='five-stars'>5</a></li>
</ul>
Looking at the CSS line numbers above, are you shocked that such a simple effect requires so much code? In my opinion, you can only have one effect and one style without using JS. If you have a simpler and more dazzling effect, please let me know!