<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style lang="">
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix {zoom: 1;}
.ABbj_starBox {
font-size: 20px;
color: #43b5b5;
}
.ABbj_starBox div {
margin: 10px 5px 10px 0;
cursor: pointer;
float: left ;
}
</style>
</head>
<body>
<div class="ABbj_starBox clearfix">
<div class="ABbj_star">☆</div>
<div class="ABbj_star">☆</div>
<div class="ABbj_star">☆</div>
<div class="ABbj_star">☆</div>
<div class="ABbj_star">☆</div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var emptyStar = "☆";
var fullStar = "★";
// ABbj_star 鼠标移入事件
$(".ABbj_star").mouseenter(function() {
$(this).text(fullStar).prevAll().text(fullStar).end().nextAll().text(emptyStar);
});
// ABbj_star 鼠标离开事件
$(".ABbj_star").mouseleave(function() {
$(".ABbj_star").text(emptyStar);
$(".ABbj_star .current").text(fullStar).prevAll().text(fullStar).end().nextAll().text(emptyStar);
});
// ABbj_star 点击事件
$(".ABbj_star").click(function() {
if ($(this).hasClass("current")) {
$(this).removeAttr("class");
} else {
$(this).attr("class", "current").siblings().removeAttr("class");
}
})
</script>
</body>
</html>
扫一扫
499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
