<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.nav {
width: 750px;
height: 30px;
}
.nav ul li {
width: 100px;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.nav ul li .color {
width: 100px;
height: 30px;
position: absolute;
left: 0;
top: 30px;
background: yellow;
opacity: 0.5;
}
.nav ul li:hover .color{ /*关键一步，鼠标移入颜色上升*/
transition: 0.2s ease;
top:0;
}
</style>
</head>
<body>
<div class="nav">
<ul id="ul">
<li au="a">
1
<div class="color"></div>
</li>
<li au="b">
2
<div class="color"></div>
</li>
<li au="c">
3
<div class="color"></div>
</li>
<li au="d">
4
<div class="color"></div>
</li>
<li au="e">
5
<div class="color"></div>
</li>
<li au="f">
6
<div class="color"></div>
</li>
<li au="g">
7
<div class="color"></div>
</li>
</ul>
</div>
//找不到音乐，所以没有放
<script>
// var random = Math.round(Math.random()*7) 随机1到7
var oUl = document.getElementById("ul")
var aLi = oUl.getElementsByTagName("li")
var oColor=document.getElementsByClassName("color")
var color = ["black", "yellow", "green", "orange", "purple", "red", "blue"]
for(var i = 0; i < aLi.length; i++) {
oColor[i].style.background=color[i]
}
</script>
</body>
</html>