1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 ul{
8 width: 150px;
9 height: 30px;
10 }
11 li{
12 list-style: none;
13 width: 27px;
14 height: 28px;
15 float: left;
16 background: url(images/star.gif);
17 }
18 </style>
19 <script type="text/javascript">
20 window.onload=function () {
21 var lis= document.getElementsByTagName("li");
22 for (var i = 0; i < lis.length; i++) {
23 lis[i].currentIndex=i;
24 lis[i].onmouseover = function (e) {
25 var event = e || window.event;
26 var li = event.target|| event.srcElement;
27 changeColor(li.currentIndex);
28 };
29 }
30 function changeColor(index) {
31 for (var j = 0; j < lis.length; j++) {
32 lis[j].style.background = "url(images/star.gif)";
33 }
34 for (var i = 0; i <= index; i++) {
35 lis[i].style.background = "url(images/star.gif) 0 -29px";
36 }
37 }
38 }
39 </script>
40 </head>
41 <body>
42 <ul>
43 <li></li>
44 <li></li>
45 <li></li>
46 <li></li>
47 <li></li>
48 </ul>
49
50 </body>
51 </html>
