<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: red;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
<script>
$('li').mouseenter(function () {
$(this).text('★').prevAll().text('★').siblings().removeClass();
})
$('li').mouseleave(function () {
$('li').text('☆');
$('.red').text('★').prevAll().text('★');
})
$('li').click(function () {
$(this).addClass('red').siblings().removeClass();
$('.red').text('★').prevAll().text('★');
})
</script>五角星评分案例
猜你喜欢
转载自blog.csdn.net/m0_38027483/article/details/81985909
今日推荐
周排行