<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#star li{
float: left;
width: 27px;
height: 28px;
background: url(img/star.gif) no-repeat left top;
}
#star li:hover,#star li.hover{
background: url(img/star.gif) no-repeat left bottom;
}
</style>
</head>
<body>
<ul id="star">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
var oStar = document.getElementById("star");
var aStarList = oStar.children;
var index = 0;
var flag = false;
for(let i = 0; i < aStarList.length; i++){
//给每一个li添加鼠标移入事件
aStarList[i].onmouseover = function(){
//清除所有的类名
for(var j = 0; j < aStarList.length; j++){
aStarList[j].className = "";
}
//给当前移入的那个星星及其之前的所有的星星添加类名
for(var k = 0; k <= i; k++){
aStarList[k].className = "hover";
}
}
//添加移出事件
aStarList[i].onmouseout = function(){
//是否点击了
for(var j = 0; j < aStarList.length; j++){
aStarList[j].className = "";
}
if(flag){
for(var k = 0; k <= index ; k++){
aStarList[k].className = "hover";
}
}
}
//点击事件，决定移出之后是否移除hover类
aStarList[i].onclick = function(){
//mouseout事件和click有一种联系
flag = true;
index = i;
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#star li{
float: left;
width: 27px;
height: 28px;
background: url(img/star.gif) no-repeat left top;
}
#star li:hover,#star li.hover{
background: url(img/star.gif) no-repeat left bottom;
}
</style>
</head>
<body>
<ul id="star">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
var oStar = document.getElementById("star");
var aStarList = oStar.children;
var index = 0;
var flag = false;
for(let i = 0; i < aStarList.length; i++){
//给每一个li添加鼠标移入事件
aStarList[i].onmouseover = function(){
//清除所有的类名
for(var j = 0; j < aStarList.length; j++){
aStarList[j].className = "";
}
//给当前移入的那个星星及其之前的所有的星星添加类名
for(var k = 0; k <= i; k++){
aStarList[k].className = "hover";
}
}
//添加移出事件
aStarList[i].onmouseout = function(){
//是否点击了
for(var j = 0; j < aStarList.length; j++){
aStarList[j].className = "";
}
if(flag){
for(var k = 0; k <= index ; k++){
aStarList[k].className = "hover";
}
}
}
//点击事件，决定移出之后是否移除hover类
aStarList[i].onclick = function(){
//mouseout事件和click有一种联系
flag = true;
index = i;
}
}
</script>
</body>
</html>