css活用，评分点击星星

最新推荐文章于 2021-07-07 09:50:01 发布

weixin_30808253

最新推荐文章于 2021-07-07 09:50:01 发布

阅读量82

点赞数

原文链接：http://www.cnblogs.com/huangqiming/p/7279907.html

版权

1、字符图集

2、css样式

.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;}/*五角星点击后样式*/

3、HTML

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

4、JS

    $(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');
        })
    })

转载于:https://www.cnblogs.com/huangqiming/p/7279907.html