您现在的位置: 首页 > 开发编程 > HTML+CSS > 正文

纯css简单实现五角星评分

作者:admin来源:网络浏览:时间:2017-08-04 10:02:39我要评论
分享到
纯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> 

 

相关热词搜索: css五角星