效果图如下： css所需背景图片： 二话不说，帖代码： html代码 复制代码 代码如下: 总体评价:*class="rating-wrap"> 点击星星开始打分 广告效果:*class="rating-wrap"> 点击星星开始打分 JS代码 复制代码 代码如下: <BR>$(function(){ <BR>$(".rating-wrap a").mouseover(function(){ <BR>$(this).parent().siblings().find("a").removeClass("active-star"); <BR>$(this).addClass("active-star"); <BR>$("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint")) <BR>}).mouseleave(function(){ <BR>var selectID=$(this).parent().parent().attr("id")+"select"; <BR>$(this).removeClass("active-star"); <BR>if($("#"+selectID).length==0) <BR>{ <BR>$("."+$(this).parent().parent().attr("id")).removeClass("active-hint").html("点击星星开始打分"); <BR>} <BR>else <BR>{ <BR>$("."+$(this).parent().parent().attr("id")).html($("#"+selectID).attr("data-hint")); <BR>$("#"+selectID).addClass("active-star"); <BR>} <BR>}).click(function(){ <BR>$(this).addClass("active-star").attr('id',$(this).parent().parent().attr("id")+"select"); <BR>$(this).parent().siblings().find("a").attr("id",""); <BR>$("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint")).addClass("active-hint"); <BR>}) <BR>}) <BR> css代码 复制代码 代码如下: <BR>.item-rank-rst, .user-rank-rst, .rating-wrap ul, .rating-wrap a:hover, .rating-wrap .active-star, .user-m-star, .urr-rank60, .breadcrumb .note { <BR>background-image: url(xing_bg.png);/**-----星级插件背景图片----**/ <BR>background-repeat: no-repeat; <BR>} <BR>.rating-wrap { <BR>background: none repeat scroll 0 0 #FFF9F1; <BR>border: 1px solid #EFE0D7; <BR>display: inline-block; <BR>float: left; <BR>height: 20px; <BR>margin-right: 5px; <BR>padding: 4px 0 0 5px; <BR>position: relative; <BR>top: -2px; <BR>width: 89px; <BR>z-index: 0; <BR>} <BR>.rating-wrap ul { <BR>background-position: 0 -250px; <BR>height: 16px; <BR>position: relative; <BR>width: 85px; <BR>z-index: 10; <BR>} <BR>.rating-wrap li { <BR>display: inline; <BR>} <BR>.rating-wrap a { <BR>display: block; <BR>height: 16px; <BR>left: 0; <BR>position: absolute; <BR>top: 0; <BR>} <BR>.rating-wrap .five-stars { <BR>background-position: 0 -160px; <BR>width: 84px; <BR>z-index: 10; <BR>} <BR>.rating-wrap .four-stars { <BR>background-position: 0 -178px; <BR>width: 68px; <BR>z-index: 20; <BR>} <BR>.rating-wrap .three-stars { <BR>background-position: 0 -196px; <BR>width: 51px; <BR>z-index: 30; <BR>} <BR>.rating-wrap .two-stars { <BR>background-position: 0 -214px; <BR>width: 34px; <BR>z-index: 40; <BR>} <BR>.rating-wrap .one-star { <BR>background-position: 0 -232px; <BR>width: 17px; <BR>z-index: 50; <BR>} <BR>.rating-block .hint { <BR>color: #999999; <BR>float: left; <BR>} <BR>.active-hint { <BR>color: #CC0000; <BR>} <BR>.rating-block .err-hint { <BR>color: #EE0000; <BR>font-weight: bold; <BR>} <BR> 注：css代码从项目中分解出，有一小部分没贴完，大家可以根据自己的需求修改css style
