.cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;}/*清浮动*/
 ul li{list-style:none; float:left; font-size:30px; margin:5px; color:#ccc; cursor:pointer;}/*五角星样式*/
.hs,.cs{color:#f00;}/*五角星点击后样式*/

<ul class="cleanfloat">
      <li>★</li>
      <li>★</li>
      <li>★</li>
      <li>★</li>
      <li>★</li>
</ul>

    $(function () {
        $("ul li").hover(function(){
            $(this).addClass(‘hs‘);
            $(this).prevAll().addClass(‘hs‘);
        },function(){
            $(this).removeClass(‘hs‘);
            $(this).prevAll().removeClass(‘hs‘);
        })

        $("ul li").click(function () {
            $(this).addClass(‘cs‘);
            $(this).prevAll().addClass(‘cs‘);
            $(this).nextAll().removeClass(‘cs‘);
        })
    })