CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - 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()).prev().trigger("mouseover")},  
        function()).prev().trigger("mouseout")})  
    .click(function(){alert($(this).attr("title"))});       
});  
</script> 

看下效果图：

下面使用纯css实现：

/*CSS Star start*/ 
         .star-rating  
         {  
             list-style: none;  
             margin: 0px;  
             padding: 0px;  
             width: 100px;  
             height: 20px;  
             position: relative;  
             background: url(star_rating.gif) top left repeat-x;  
         }  
         .star-rating li  
         {  
             padding: 0px;  
             margin: 0px;   
             float: left;   
         }  
         .star-rating li a  
         {  
             display: block;  
             width: 20px;  
             height: 20px;  
             text-decoration: none;  
             text-indent: -9000px;  
             z-index: 20;  
             position: absolute;  
             padding: 0px;  
         }  
         .star-rating li a:hover  
         {  
             background: url(star_rating.gif) left bottom;  
             z-index: 1;  
             left: 0px;  
         }  
         .star-rating a.one-star  
         {  
             left: 0px;  
         }  
         .star-rating a.one-star:hover  
         {  
             width: 20px;  
         }  
         .star-rating a.two-stars  
         {  
             left: 20px;  
         }  
         .star-rating a.two-stars:hover  
         {  
             width: 40px;  
         }  
         .star-rating a.three-stars:hover  
         {  
             width: 60px;  
         }  
         .star-rating a.three-stars  
         {  
             left: 40px;  
         }  
         .star-rating a.four-stars  
         {  
             left: 60px;  
         }  
         .star-rating a.four-stars:hover  
         {  
             width: 80px;  
         }  
         .star-rating a.five-stars  
         {  
             left: 80px;  
         }  
         .star-rating a.five-stars:hover  
         {  
             width: 100px;  
               
         } 

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实现的文章星级效果下载