准备睡觉了，简单的写了下，基于jquery，注释也没怎么写，应该能看懂。
重新看了下需求，好像有点不一样，原理是一样的。
HTML部分
css部分
#startBox {
width: 94px;
height: 16px;
background: url(img/bg.png);
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
}
div {
width: 9.4px;
height: 100%;
float: left;
z-index: 2;
background: url(img/hover.png);
}
.startb {
background-position: 101px;
}
.starta,
.startb {
opacity: 0;
}
.starta.show,
.startb.show {
opacity: 1;
}
JS部分
var clickState = false;//是否点击了星星
var oStrat = $("#startBox>div");
oStrat.hover(function() {
var startIndex = $(this).index();
if (startIndex == 0) {
$(this).eq(startIndex).addClass("show");
if($(this).next().hasClass("show")){
$(this).next().removeClass("show");
}
} else {
var prevState = $(this).prev().hasClass("show");
var nextState = $(this).next().hasClass("show");
console.log(prevState);
if (prevState&&nextState) {
$(this).next().removeClass("show");
}
else if(prevState){
$(this).addClass("show");
}
}
});
oStrat.click(function(){
clickState=true;
});
$("#startBox").mouseleave(function(){
if(clickState){
clickState=false;
}
else{
oStrat.removeClass("show");
}
});
