CSS製作星級評價的功能

做一個星級評價的功能不是很難，但是要單純用CSS寫估計就有點難度了，先來個截圖：

效果很簡單，可能現在您現在腦子裡已經有實現的思路了。 下面先看一下我們通常情況下的實現方法：

CSS：

代碼
          .jsstar
         {   list-style: none;
            margin: 0px;
            padding: 0px;
            width: 100px;
            height: 20px;
            position: relative;
           
             }
         .jsstar li 
          {
             padding:0px;
            margin: 0px;
            float: left;
            width:20px;
            height:20px;
            background:url(star_rating.gif) 0 0 no-repeat;
            } 
 

HTML：

<p>JAVAscript + CSS實現</p>
<ul class="jsstar">
<li title="一星"></li>
<li title="二星"></li>
<li title="三星"></li>
<li title="四星"></li>
<li title="五星"></li>
</ul>
JS：（我用的是jquery）

<script type="text/javascript" src="jquery-1.3.1.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(".jsstar >li").hover(
function(){$(this).css({"background-position":"left bottom"}).prev().trigger("mouseover")},
function(){$(this).css({"background-position":"left top"}).prev().trigger("mouseout")})
.click(function(){alert($(this).attr("title"))});
});
</script>

是不是和上面的沒什麼區別，可是又一想如果使用者禁掉了javascript豈不是效果很慘？

於是我們想到了用純CSS實現，下面是代碼：

CSS：

代碼


 1 /*CSS Star start*/


 2         .star-rating


3         {


 4             list-style: none;


 5             margin: 0px;


 6             padding: 0px;


 7             width: 100px;


 8             height: 20px;


 9             position: relative;


10             background: url(star_rating.gif) top left repeat-x;


11         }


12         .star-rating li


13         {


14             padding: 0px;


15             margin: 0px;


16             float: left;


17         }


18         .star-rating li a


19         {


20             display: block;


21             width: 20px;


22             height: 20px;


23             text-decoration: none;


24             text-indent: -9000px;


25             z-index: 20;


26             position: absolute;


27             padding: 0px;


28         }


29         .star-rating li a:hover


30         {


31             background: url(star_rating.gif) left bottom;


32             z-index: 1;


33             left: 0px;


34         }


35         .star-rating a.one-star


36         {


37             left: 0px;


38         }


39         .star-rating a.one-star:hover


40         {


41             width: 20px;


42         }


43         .star-rating a.two-stars


44         {


45             left: 20px;


46         }


47         .star-rating a.two-stars:hover


48         {


49             width: 40px;


50         }


51         .star-rating a.three-stars:hover


52         {


53             width: 60px;


54         }


55         .star-rating a.three-stars


56         {


57             left: 40px;


58         }


59         .star-rating a.four-stars


60         {


61             left: 60px;


62         }


63         .star-rating a.four-stars:hover


64         {


65             width: 80px;


66         }


67         .star-rating a.five-stars


68         {


69             left: 80px;


70         }


71         .star-rating a.five-stars:hover


72         {


73             width: 100px;


74            


75         }


HTML：

<ul class='star-rating'>
  <li><a href='#' title='一星' class='one-star'>1</a>< /li>
  <li><a href='#' title='二星' class='two-stars'>2</a></li>
  <li ><a href='#' title='三星' class='three-stars'>3</a></li>
  <li><a href='#' title ='四星' class='four-stars'>4</a></li>
  <li><a href='#' title='五星' class='five-stars' >5</a></li>
</ul>
看看上面CSS的行號您是不是嚇了一跳，這麼簡單的效果竟然用了這麼多代碼？ 在我看來不用JS就只能一個效果一個樣式了，如果您還有更簡單更炫的效果請指教！