<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹幕</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
*{
padding: 0；
margin:0;
}
.comment{
font-size:40px;
color: pink;
}
.comment li{
float: left;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$(function(){
//1.给所有的li 注册鼠标经过事件，让自己和前面所有的兄弟都变成实心， 先定义俩个字段 （五角星符号）
var wjx_k="☆";
var wjx_s="★";
$(".comment>li").on("mouseenter",function(event) {
$(this).text(wjx_s).prevAll("li").text(wjx_s);
$(this).nextAll("li").text(wjx_k);
});
//2.给ul注册鼠标离开事件，让所有的li都变成空心。
$(".comment").on("mouseleave",function(event) {
$(this).children('li').text(wjx_k);
$("li.current").text(wjx_s).prevAll("li").text(wjx_s);
});
//3.给li注册点击事件。
$(".comment li").on('click', function(event) {
// $(".comment").off("mouseleave");
alert($(this).index("li")+1);
$(this).addClass('current').siblings().removeClass('current');
});
});
</script>
</body>
</html>