PS：Jquery实现星星评价!!!

 

Jquery代码：

 

 <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>


HTML代码：

 

<body>


<div class="block">

<p>Javascript + CSS实现</p>

<ul class="jsstar">

    <li title="一星"></li>

    <li title="二星"></li>

    <li title="三星"></li>

    <li title="四星"></li>

    <li title="五星"></li>

</ul>

</div>

</body>


CSS代码：
 <style type="text/css">
        .block
        { margin:10px;
          padding :10px;
          border:solid 1px #ccc;
          font-family:Verdana;
          font-size:12px;
            }
      
        .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;
            url(star_rating.gif ) 0 0 no-repeat;
            }  
            
    </style>