php做五星评价系统,CSSGAMES：纯CSS实现五星评价效果

上图：

上代码：

.container{

width: 150px;

height: 30px;

position: relative;

}

.container ul{

margin: 0;

padding: 0;

position: absolute;

list-style: none;

width: 100%;

height: 100%;

overflow: hidden;

}

.container li{

z-index: 1;

width: 20%;

height: 100%;

float: left;

background: #faf;

border-radius: 50%;

/*box-shadow: 2px red inset;*/

}

.container li:hover+span{

display: block;

z-index: 99;

width: 500%;

height: 100%;

float: left;

background: #afa;

}

span.show{

display: block;

z-index: 99;

width: 500%;

height: 100%;

float: left;

background: #afa;

}

.backer{

position: absolute;

width: 100%;

height: 100%;

}

.backer li{

background: #999;

}

another div

var spans=[];

var form =$("form")

$(".container li").on("click",function(e){

console.log(e.target.className.split("i")[1]);

// form.star.value=e.target.className.split("i")[1];

console.log($("."+e.target.className).next());

$("."+e.target.className).next().addClass("show");

spans=$("span.show");

})

$(".container ul").mouseenter(function(){

if(spans.length>0)spans.removeClass("show");

console.log(spans);

})

$(".container ul").mouseleave(function(){

spans.addClass("show")

})

没了。

PS：大力推荐《CSS揭秘》，一本让人钻牛角尖不亦乐乎的书