html:
<body>
<div id="box1">
<ul>
<audio></audio>
<li><a>首页</a></li>
<li><a>编辑</a></li>
<li><a>文本</a></li>
<li><a>选择</a></li>
<li><a>跳转</a></li>
<li><a>查找</a></li>
<li><a>运行</a></li>
<li><a>工具</a></li>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</ul>
</div>
</body>
style:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
margin: 200px auto;
width: 464px;
height: 50px;
border: 1px solid;
overflow: hidden;
}
#box1 > ul > li{
list-style: none;
float: left;
padding:0 10px;
font: 18px/48px "微软雅黑";
text-align: center;
border: 1px solid;
}
#box1 > ul > div{
width: 56px;
height: 48px;
background-color: pink;
opacity: 0.9;
float: left;
margin: 1px;
transition: 0.5s;
}
#box1 > ul > li:hover{
cursor: pointer;
}
</style>
script:
<script type="text/javascript">
window.onload=function(){
var lis=document.getElementsByTagName("li");
var bgcolors=document.querySelectorAll("#box1 ul div");
var aud=document.querySelector("audio");
var arr=["a","b","c","d","e","f","g","f","e"];
for (let i=0; i<lis.length; i++) {
lis[i].onmouseenter=function(){
bgcolors[i].style.transform="translateY(-50px)";
aud.src="http://s8.qhimg.com/share/audio/piano1/"+arr[i]+"4.mp3";
aud.play();
}
lis[i].onmouseleave=function(){
bgcolors[i].style.transform="translateY(0px)";
}
}
}
</script>