CSS to make star rating function

Do a star rating function is not difficult, but to write a simple CSS estimate is a bit difficult, first screenshot:

The effect is very simple, maybe now you have the idea of a realization in mind. Let's take a look at how we normally implement this:

CSS:

Code
          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 Implementation </p>
<ul class= "Jsstar" >
<li title= "one star" ></li>
<li title= "Two Star" ></li>
<li title= "Samsung" ></li>
<li title= "Four Star" ></li>
<li title= "Five Star" ></li>
</ul>
JS: (I'm using 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 NRC"}). Prev (). Trigger ("MouseOver")},
Function () {$ (this). css ({"background-position": ' Left Top} '). Prev (). Trigger ("Mouseout")})
. Click (function () {Alert ($ (this). attr ("title")});
});
</script>

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!