<Style>
*{Margin0;Padding0;}
.pingfen{Width195pxMargin10PX Auto;Height20pxPositionrelative;}
.Pingfenul{Height35pxMargin-bottom:10px;}
.Pingfenli{Width35pxMargin-left:4pxFloatLeftHeight35pxCursorPointerBackgroundUrl/public/nrmap/img2/fstar2.png)No-repeat Center Center;List-style:none;}
.Pingfen.active{BackgroundUrl/public/nrmap/img2/fstar1.png)No-repeat Center Center;}
.Pingfenp{
PositionAbsoluteTop24pxLeft0pxWidth134pxHeight28px
Background#fff;Line-height:28pxText-align:CenterBorder1PX Solid#333;
Displaynone;}
</Style>
<Script>
var aData =["Very poor","Poor","General","Recommended","Force Push"];
Window.Onload=function(){
VarOdiv =Document.getElementById("Rank");
VarALi =Odiv.getElementsByTagName("Li");
VarOP =Odiv.getElementsByTagName("P")[0];
Vari =0;
For(I=0;i<ALi.Lengthi++){
ALi[I].index =I
ALi[I].Onmouseover=function(){
OP.Style.display ="Block";
OP.Style.margintop="30px";
OP.Innerhtml=adata[This.Index];
For(I=0;i<=This.Indexi++){
ALi[I].Classname="Active";
}
};
ALi[I].onmouseout =function () {
op. style. display = for0; i<ali.length; i++) {ali[i].classname= "";
};
Ali[i].onclick=function () {
alert (Adata[this.index]);
};
}
};
</script>
<body>
<div id= "Rank" class= "Pingfen" >
<ul>
<li>< /li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p> loading </p>
</div>
</body>
JS native Implementation Pentagram Evaluation details demo