前言
常常我们看到一些评论，星星打分，今天我们就用Jq代码来实现，看看究竟是如何实现的 其中有两个重要的事件mouseenter和mouseleave效果如下图
代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ol { list-style: none; } li { float: left; cursor: pointer; } </style> <script src="jquery/jquery-1.9.1.js"></script> <script type="text/javascript"> var isSave = false; $(function () { //鼠标移到某个li标签上面,他以及他之前的都变成实心星星 $("#olStar li").mouseenter(function () { //修改标识变量 isSave = false; //自己变实心s $(this).html("★").prevAll().html("★"); $(this).nextAll().html("☆"); //前面的兄弟变实心 }) //鼠标离开li标签 全部还原 $("li").mouseleave(function () { //判断是否保存结果 if (!isSave) { $("li").html("☆"); } }) //点击li标签 保存分数 $("li").click(function () { isSave = true; }) }) </script> </head> <body> <ol id="olStar"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ol> </body> </html>