评分案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}

.comment {
font-size: 40px;
color: yellow;
}

.comment li {
float: left;
}

ul {
list-style: none;
}
</style>
<script src="jquery-1.12.2.js"></script>

$(function () {
$(".comment>li").mouseover(function () {
$(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
}).mouseout(function () {
$(".comment").find("li").text("☆");
$(".comment>li[index=1]").text("★").prevAll("li").text("★")
}).click(function () {
$(this).attr("index","1").siblings("li").removeAttr("index");
});
});
</script>
</head>

</html>