1    <style>
 2         span {
 3             font: bold 100px '宋体';
 4             float: left;
 5             color: gold;
 6             cursor: pointer;
 7         }
 8     </style>
 9 <body>
10     <div>
11         <span></span>
12         <span></span>
13         <span></span>
14         <span></span>
15         <span></span>
16     </div>
17     <script src="lib/jquery-1.12.4.js"></script>
18     <script>
19         $('span').mouseenter(function () {
20             $(this).text('').prevAll().text('').end().nextAll().text('');
21         });
22         $('span').mouseleave(function () {
23             $('span').text('');
24             $('.active').text('').prevAll().text('').end().nextAll().text('');
25         });
26         $('span').click(function () {
27             $(this).addClass('active').siblings().removeClass('active');
28         });
29     </script>
30 </body>

星级会随着鼠标的移动而变化:

这里有的人看不到变化,那就对了,因为这是一张png,不是gif。

01-26 08:00