jq 五星好评

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .comment {
        font-size: 40px;
        color: #ff16cf;
    }

    .comment li {
        float: left;
    }

    ul {
        list-style: none;
    }
</style>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        //1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心
        $(".comment>li").on("mouseenter",function () {
           $(this).text("☆").prevAll().text("★");
           $(this).nextAll().text("☆");
        });
        //2. 给ul注册鼠标离开事件，让所有的li都变成空心
        $(".comment").on("mouseleave",function () {
             $(this).children().text("☆");
            //再做一件事件，找到current，让current和current前面的变成实心就行。
            $("li.current").text("★").prevAll().text("★");
        });
        //3. 给li注册点击事件
        $(".comment>li").on("click",function () {
           $(this).addClass("current").siblings().removeClass("current");
        });
    });
</script>