.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');

        })

    })