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。
原文地址：https://www.cnblogs.com/cnlisiyiii-stu/p/11597872.html
时间： 2024-10-10 10:04:05