<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: #000000;
}
.comment {
font-size: 40px;
color: yellow;
}
.comment li {
float: left;
cursor: pointer;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
/*
* 当我鼠标移上到其中一个li身上的时候 应该让这个li以及它之前的li都变成实心的星星
*
* 单击时候 记下来当前单击的这个li
*
* 当我离开以后全部清空 到底清空不清空 取决于单击过没单击过
* 当移出去的时候 可以先将所有的全部清空 然后保留当时单击的那个li 以及之前的
*
* */
var star1 = "☆";
var star2 = "★";
$("ul li").on({
"mouseover":function(){
//为了防止干扰 暴力清空所有
$("ul li").text(star1);
// 移到谁身上让谁显示实心星星以及它之前的li都显示实心
$(this).text(star2).prevAll().text(star2);
},
"click":function(){
// 让别人都去掉激活类 让当前的li 加上这个类 为了单独标记一下
$(this).addClass("active").siblings().removeClass("active");
},
"mouseout":function(){
// 先让所有都清空
$("ul li").text(star1);
// 让之前被标记过的那个li变成实心星星 以及让它之前的li也变成实心的星星
$("ul li.active").text(star2).prevAll().text(star2);
}
})
</script>
</html>
