一，问题描述

  • 当鼠标滑过空白的五颗星星时，有预览的颜色填充，当点击鼠标后，颜色填充确定，确定的颜色是绿色，当鼠标预览时，依然有预览色，没有点击鼠标确定时，颜色依然是，上一次的记录，点击了则是当次的好评记录，并且点击后，会有提示框弹出提示。

二，效果预览

三，用到的主要事件

  • onclick：点击事件
  • window.onload：页面加载事件

四，遇到的问题

  • 鼠标从左往右可以看到与蓝色正常显示，但是鼠标从右往左就一直是五颗星填充的预览色。
  • 原因：涉及到层级关系，从左往右正好星星的数量是从少到多，遮挡了前面的，从右往左是从多到少，一开始就遮挡了少的，就无法显示少的情况，就一直显示五颗预览色。
  • 解决办法：每当移动到当前的星星时，就设置属性z-index=5；将当前的层级降低，就不会遮挡了。

五，完整代码

  • 代码结构

  • Html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="../css/start.css"/>
	<script type="text/javascript" src="../js/start.js" ></script>
	<body> 
		<ul class="nav  " id="nav">
			<li class="onestart"><a href="#" title="1分">1分</a></li>
			<li class="twostart"><a href="#" title="2分">2分</a></li>
			<li class="threestart"><a href="#" title="3分">3分</a></li>
			<li class="fourstart"><a href="#" title="4分">4分</a></li>
			<li class="fivestart"><a href="#" title="5分">5分</a></li>
		</ul>
	</body>
</html>
  • Css代码
*{
	padding: 0px;
	margin: 0px;
}
body{
	height: 600px;
	width: 400px;
	border: 1px solid blue;
	margin: 0 auto;
	text-align: center;
}




.nav{
	height: 16px;
	width: 80px;
	margin: 20px auto;
	background: url(../images/star-matrix.gif) no-repeat;
	/*text-align: center;*/
	position: relative;
}

.onestart{
	background-position: 0px -16px;
}
.twostart{
	background-position: 0px -32px;
}
.threestart{
	background-position: 0px -48px;
}

.fourstart{
	background-position: 0px -64px;
}

.fivestart{
	background-position: 0px -80px;
}



.nav li{
	height: 16px;
	width: 16px;
	list-style: none;
	float: left;
}
.nav li a{
	height: 16px;
	width: 16px;
	position: absolute;
	text-decoration: none;
	display: inline-block;
	text-indent: -99999px;
	z-index: 10;
}
.nav li a:hover{
	left: 0px;
	width: 80px;
	z-index: 7;
	background: url(../images/star-matrix.gif) no-repeat;
	/*background-color: gray;*/
}

.nav .onestart  a:hover{
	background-position: 0px -96px;
}
.nav .twostart  a:hover{
	background-position: 0px -112px;
}
.nav .threestart  a:hover{
	background-position: 0px -128px;
}
.nav .fourstart  a:hover{
	background-position: 0px -144px;
}
.nav .fivestart  a:hover{
	background-position: 0px -160px;
}
  • JS代码
window.onload=function(){
	oUl=document.getElementById("nav");
	lis=oUl.getElementsByTagName("li");
	
	for (var i = 0; i < lis.length; i++) {
		lis[i].onclick=function(){
			
			oUl.className="nav  "+this.className;
			console.log(oUl.className);
			var score=this.getElementsByTagName("a")[0].title;
			alert("评分是："+score);
		}
	}
}

六，效果展示

更多推荐

Html+Css+Js五星好评（完整代码+详解）