<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<style>
.one {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
border: solid 1px #008c8c;
}
.color {
background-color: #008c8c;
}
</style>
</head>
<body>
<div class="whole">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
</div>
<script>
// 鼠标进入圆让自己和上所有兄弟节点添加类名color
$(".one").on("mouseenter", function (e) {
$(e.target).addClass("color").prevAll().addClass("color")
})
// 倒着移动,鼠标移出某星星让自己不亮,上所有兄弟节点亮
$(".one").on("mouseleave", function (e) {
$(e.target).removeClass("color").prevAll().addClass("color")
console.log(flag);
})
// 移出大的div(评分条),都不亮
$(".whole").on("mouseleave", function (e) {
$("div").removeClass("color");
})
var flag = false
$(".one").on("click", function (e) {
// 点击圆 让自己和上所有兄弟节点添加类名color
$(e.target).addClass("color").prevAll().addClass("color")
if (!flag) {
flag = true
} else {
flag = false;
}
// 点击一次后移出鼠标移入移出事件
if (flag) {
$(".one").off("mouseenter")
$(".one").off("mouseleave")
$(".whole").off("mouseleave")
} else {
$(e.target).addClass("color").prevAll().addClass("color")
// 下次点击又绑定
$(".one").on("mouseenter", function (e) {
})
$(".one").on("mouseleave", function (e) {
$(e.target).removeClass("color").prevAll().addClass("color")
console.log(flag);
})
$(".whole").on("mouseleave", function (e) {
$("div").removeClass("color");
})
}
})
</script>
</body>
</html>