<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>