自引jquery
1 <style>
2 * { margin: 0; padding: 0; }
3 ul { list-style: none; margin: 100px; }
4 .comment {
5 color: red;
6 }
7
8 .comment li {
9 float: left;
10 font-size: 40px;
11 margin-left:5px;
12 }
13 </style>
14 <body>
15 <ul class="comment">
16 <li id="s">☆ </li>
17 <li>☆</li>
18 <li>☆</li>
19 <li>☆</li>
20 <li>☆</li>
21 </ul>
22 </body>
23 </html>
24 <script src="jquery-1.11.1.min.js"></script>
25 <script>
26 /*
27 1、鼠标移入 ：当前星星和前面的为实心的
28 当前星星后面的是空心
29 2、鼠标移出 ：
30 未点击： 全部空心
31 有点击： 当前点击的星星和前面的是实心的
32 3、鼠标点击：
33 当前点击的星星和前面的是实心的
34 * */
35 var empsatr = "☆";
36 var selstar = "★";
37 $(".comment").on('mouseenter','li',function(){
38 $(this).html(selstar).prevall().html(selstar).end().nextall().html(empsatr);
39 })
40 $(".comment").on('mouseleave',"li",function(){
41 $("li").html(empsatr);
42 $(".select").html(selstar).prevall().html(selstar);
43 });
44 $(".comment").on('click',"li",function(){
45 $(this).addclass('select').siblings().removeclass("select");
46 })
47 </script>
