自引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>