給商品評分效果，CSS技巧

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/153R4H92-0.gif" title="2013-09-03_163037.gif" />

像這種給商品評分的效果，基本上所有電商網站都有。這裡寫這個效果的時候運用到了一些CSS技巧。結合posiiton,z-index,background-image,background-position,overflow,:hover等等多個屬性。

<li class="pro_rating">                            給商品評分：                            <ul class="rating nostar">                                <li class="one"><a href="#" title="1分">1</a></li>                                <li class="two"><a href="#" title="2分">2</a></li>                                <li class="three"><a href="#" title="3分">3</a></li>                                <li class="four"><a href="#" title="4分">4</a></li>                                <li class="five"><a href="#" title="5分">5</a></li>                            </ul>                        </li>

.rating{    overflow:hidden;    width:80px;    height:16px;    margin:0 0 20px 0;    clear:both;    background-image:url(../images/star-matrix.gif);    position:relative;}.nostar{    background-position:0 0;}.onestar{    background-position:0 -16px;}.twostar{    background-position:0 -32px;}.threestar{    background-position:0 -48px;}.fourstar{    background-position:0 -64px;}.fivestar{    background-position:0 -80px;}ul.rating li{    float:left;    cursor:pointer;    width:16px;    height:16px;    text-indent:-999em;}ul.rating li a{    display:inline-block;    width:16px;    height:16px;    position:absolute;    top:0;    left:0;    z-index: 200;}ul.rating li.one a{    left:0;}ul.rating li.two a{    left:16px;}ul.rating li.three a{    left:32px;}ul.rating li.four a{    left:48px;}ul.rating li.five a{    left:64px;}ul.rating li a:hover{    width:80px;    height:16px;    left:0;    background-image:url(../images/star-matrix.gif);    overflow:hidden;    z-index:2;}ul.rating li.one a:hover{    background-position:0 -96px;}ul.rating li.two a:hover{    background-position:0 -112px;}ul.rating li.three a:hover{    background-position:0 -128px;}ul.rating li.four a:hover{    background-position:0 -144px;}ul.rating li.five a:hover{    background-position:0 -160px;}

//給商品評分    $(".rating li a").click(function(){        var title=$(this).attr("title");        alert("您給此商品的評價是："+title);        var cl=$(this).parent().attr("class");        $(this).parent().parent().removeClass("nostar").addClass(cl+"star");        $(this).blur();//去掉a連結的虛線框.        return false;    })