码迷,mamicode.com
首页 > 其他好文 > 详细

星级评价案例

时间:2019-09-27 15:01:36      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:style   sele   body   nbsp   inf   point   eva   rip   eval   

 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。

 

星级评价案例

标签:style   sele   body   nbsp   inf   point   eva   rip   eval   

原文地址:https://www.cnblogs.com/cnlisiyiii-stu/p/11597872.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!