is not the same as the above, but another thought if the user banned JavaScript is not very bad effect?
So we think of using a pure CSS implementation, the following 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;
Background:url (star_rating.gif) top left repeat-x;
11}
Star-rating Li
13 {
padding:0px;
margin:0px;
Float:left;
17}
star-rating Li a
19 {
Display:block;
width:20px;
height:20px;
Text-decoration:none;
text-indent: -9000px;
z-index:20;
Position:absolute;
padding:0px;
28}
star-rating li A:hover
30 {
Background:url (star_rating.gif) left NRC;
z-index:1;
left:0px;
34}
star-rating A.one-star
36 {
Notoginseng left:0px;
38}
star-rating A.one-star:hover
40 {
width:20px;
42}
star-rating A.two-stars
44 {
left:20px;
46}
star-rating A.two-stars:hover
48 {
width:40px;
50}
star-rating A.three-stars:hover
52 {
width:60px;
54}
star-rating A.three-stars
56 {
left:40px;
58}
star-rating A.four-stars
60 {
left:60px;
62}
star-rating A.four-stars:hover
64 {
width:80px;
66}
star-rating A.five-stars
68 {
left:80px;
70}
star-rating A.five-stars:hover
72 {
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= ' second star ' class= ' Two-stars ' >2</a></li> <li ><a href= ' # ' title= ' Samsung ' class= ' Three-stars ' >3</a></li> <li><a href= ' # ' title = ' Four star ' class= ' Four-stars ' >4</a></li> <li><a href= ' # ' title= ' five-star ' class= ' Five-stars ' >5</a></li> </ul> Take a look at the line number of the above CSS are you surprised that this simple effect uses so much code? In my opinion without JS can only one effect a style, if you have more simple and more dazzling effect please advise!
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.