<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<style>
.star-five {
position: relative;
display: block;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-bottom: 5px solid #ffff00;
border-left: 10px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.star-five:before {
border-bottom: 10px solid yellow;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -6px;
left: -6px;
display: block;
content: "";
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.star-five:after {
position: absolute;
display: block;
top: 0;
left: -10px;
width: 0;
height: 0;
border-right: 10px solid transparent;
border-bottom: 5px solid #ffff00;
border-left: 10px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: "";
}
</style>
</head>
<script>
var aData =["很差","较差","一般","推荐","力推"];
window.onload=function(){
var oDiv = document.getElementById("rank");
var aLi = oDiv.getElementsByTagName("li");
var oP = oDiv.getElementsByTagName("p")[0];
var i =0;
for(i=0;i<aLi.length;i++){
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.index;i++){
aLi[i].className="active";
}
};
aLi[i].onmouseout = function(){
oP.style.display = "";
for(i=0; i<aLi.length; i++){
aLi[i].className="";
}
};
aLi[i].onclick=function(){
alert(aData[this.index]);
};
}
};
</script>
<body><span class="star-five"></span><span class="star-five"></span></body></html>
