PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HTML+CSS > 正文

    纯css简单实现五角星评分

    作者:admin来源:网络浏览:时间:2017-08-04 10:02:39我要评论
    分享到
    导读:纯css简单实现五角星评分,再也不需要使用图片来代替了,非常的简单方便。效果图如下:<style>.cleanfloat::after{display:block;clear:bot...
    纯css简单实现五角星评分,再也不需要使用图片来代替了,非常的简单方便。效果图如下:

    纯css简单实现五角星评分

    1. <style> 
    2. .cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;}/*清浮动*/ 
    3.  ul li{list-style:none; float:left; font-size:30px; margin:5px; color:#ccc; cursor:pointer;}/*五角星样式*/ 
    4. .hs,.cs{color:#f00;}/*五角星点击后样式*/ 
    5. </style> 
    6. <script type="text/javascript" src="http://www.bcty365.com/statics/js/bcty365_js/jquery.min.js"></script> 
    7. <ul class="cleanfloat"
    8.       <li>&#9733;</li> 
    9.        <li>&#9733;</li> 
    10.        <li>&#9733;</li> 
    11.        <li>&#9733;</li> 
    12.        <li>&#9733;</li> 
    13.    </ul> 
    14.    <script> 
    15.     $(function () { 
    16.         $("ul li").hover(function(){ 
    17.             $(this).addClass('hs'); 
    18.             $(this).prevAll().addClass('hs'); 
    19.         },function(){ 
    20.             $(this).removeClass('hs'); 
    21.             $(this).prevAll().removeClass('hs'); 
    22.         }) 
    23.  
    24.         $("ul li").click(function () { 
    25.             $(this).addClass('cs'); 
    26.             $(this).prevAll().addClass('cs'); 
    27.             $(this).nextAll().removeClass('cs'); 
    28.         }) 
    29.     }) 
    30. </script> 

     

    转载请注明(B5教程网)原文链接:http://www.bcty365.com/content-70-5905-1.html
    相关热词搜索: css五角星
    网友评论: