.xingji{
position: relative;
background-color: lightcyan;
}
.xingxing a{
display: inline-block;
width:19px;
height: 19px;
/* background-color: red; */
background-image: url(img/star.png);
}
.active{
background-position: 0 -28px;
}
.active0{
background-position: 0 -28px;
}
.contents{
position: absolute;
}
.assess{
display: inline-block;
position: absolute;
left: 150px;
top: 10px;
}
var msgs = ["很不满意|差得太离谱,与卖家描述的严重不符,非常不满",
"不满意|部分有破损,与卖家描述的不符,不满意",
"一般|质量一般,没有卖家描述的那么好",
"满意|质量不错,与卖家描述的基本一致,还是挺满意的",
"非常满意|质量非常好,与卖家描述的完全一致,非常满意"];
$('.xingxing a').mouseenter(function(){
$('.xingxing a').removeClass('active0');
$(this).prevAll().addClass('active');
$(this).addClass('active');
var msg=msgs[$(this).index()];
var left=$(this).position().left;
$('.contents').text(msg).css('left',left);
});
var index0=0;
$('.xingxing a').click(function(){
$('.xingxing a').removeClass('active0');
$(this).addClass('active0').prevAll().addClass('active0');
$('.assess').text($(this).index()+1+'分'+$('.contents').text());
index0=$(this).index();
});
$('.xingxing a').mouseleave(function(){
$(this).prevAll().removeClass('active');
$(this).removeClass('active');
console.log(index0)
$('.xingxing a').eq(index0).addClass('active0').prevAll().addClass('active0');
$('.contents').text(null);
});
一键复制
编辑
Web IDE
原始数据
按行查看
历史