我前面博客写过一个星级评论的原生写法，非常复杂，今天就通过jquery来写一个简单的星级点亮的效果，来看代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .ct-star { display: inline-block; margin: 0 1px; width: 19px; height: 19px; background: url(img/stars.png) no-repeat; vertical-align: -2px; cursor: pointer; } .ic-star-off { background-position: -39px 0; } </style> </head> <body> <span class="star"> <b class="ct-star ic-star-off"></b> <b class="ct-star ic-star-off"></b> <b class="ct-star ic-star-off"></b> <b class="ct-star ic-star-off"></b> <b class="ct-star ic-star-off"></b> </span> </body> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function(){ $(".star b").on("mouseenter",function(){ $(this).removeClass("ic-star-off").prevAll().removeClass("ic-star-off"); }); $(".star").on("mouseleave",function(){ $(this).children().addClass("ic-star-off"); $("b.curr").removeClass("ic-star-off").prevAll().removeClass("ic-star-off"); }); $(".star b").on("click",function(){ $(this).addClass("curr").siblings().removeClass("curr") }) }) </script> </html>
效果图就不展示了，将代码拷贝自己可以试试哦，一定要注意自己引用文件的路径！好了，今天就写这么一个简单的小例子。