img:
css:
.rating{ width:80px; height:16px; margin:0 0 20px 0; padding:0; list-style:none; clear:both; position:relative; background: url(images/star-matrix.gif) no-repeat 0 0; } .nostar {background-position:0 0} .onestar {background-position:0 -16px} .twostar {background-position:0 -32px} .threestar {background-position:0 -48px} .fourstar {background-position:0 -64px} .fivestar {background-position:0 -80px} ul.rating li { cursor: pointer; /*ie5 mac doesn't like it if the list is floated*/ float:left; /* end hide*/ text-indent:-999em; } ul.rating li a { position:absolute; left:0; top:0; width:16px; height:16px; text-decoration:none; z-index: 200; } ul.rating li.one a {left:0} ul.rating li.two a {left:16px;} ul.rating li.three a {left:32px;} ul.rating li.four a {left:48px;} ul.rating li.five a {left:64px;} ul.rating li a:hover { z-index:2; width:80px; height:16px; overflow:hidden; left:0; background: url(images/star-matrix.gif) no-repeat 0 0 } ul.rating li.one a:hover {background-position:0 -96px;} ul.rating li.two a:hover {background-position:0 -112px;} ul.rating li.three a:hover {background-position:0 -128px} ul.rating li.four a:hover {background-position:0 -144px} ul.rating li.five a:hover {background-position:0 -160px}
html:
<ul id="rating" class="rating scorestar"> <li class="one" ><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <li class="three"><a href="#" title="3 Stars">3</a></li> <li class="four" ><a href="#" title="4 Stars">4</a></li> <li class="five" ><a href="#" title="5 Stars">5</a></li> </ul>
jq:
$(function(){ // 评分 $("#rating li").bind("click", function () { var socre = $(this).attr("class"); $("#rating").attr("class", "").addClass("rating").addClass(socre + "star"); }) })