效果图如下：
css所需背景图片：
二话不说，帖代码：
html代码
代码如下:
总体评价:
*class="rating-wrap">
点击星星开始打分
广告效果:
*class="rating-wrap">
点击星星开始打分
JS代码
代码如下:
$(function(){
$(".rating-wrap a").mouseover(function(){
$(this).parent().siblings().find("a").removeClass("active-star");
$(this).addClass("active-star");
$("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint"))
}).mouseleave(function(){
var selectID=$(this).parent().parent().attr("id")+"select";
$(this).removeClass("active-star");
if($("#"+selectID).length==0)
{
$("."+$(this).parent().parent().attr("id")).removeClass("active-hint").html("点击星星开始打分");
}
else
{
$("."+$(this).parent().parent().attr("id")).html($("#"+selectID).attr("data-hint"));
$("#"+selectID).addClass("active-star");
}
}).click(function(){
$(this).addClass("active-star").attr('id',$(this).parent().parent().attr("id")+"select");
$(this).parent().siblings().find("a").attr("id","");
$("."+$(this).parent().parent().attr("id")).html($(this).attr("data-hint")).addClass("active-hint");
})
})
css代码
代码如下:
注：css代码从项目中分解出，有一小部分没贴完，大家可以根据自己的需求修改css style
