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>
Star will change with the movement of the mouse:
Some people here do not see a change, you are right, because this is a png, not gif.