<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#list li {
list-style-type: none;
80px;
height: 30px;
line-height: 30px;
background-color: beige;
text-align: center;
float: left;
margin-left: 5px;
position: relative;
}
#list li.current {
background-color: burlywood;
}
#list li a {
text-decoration: none;
display:inline-block;
}
.odd {
background-color: #ccc;
}
.even {
background-color: #999;
}
</style>
</head>
<body>
<div id="menu">
<ul id="list">
<li class="current"><a href="javascript:void(0)">首页</a></li>
<li><a href="javascript:void(0)">播客</a></li>
<li><a href="javascript:void(0)">博客</a></li>
<li><a href="javascript:void(0)">相册</a></li>
<li><a href="javascript:void(0)">关于</a></li>
<li><a href="javascript:void(0)">帮助</a></li>
</ul>
</div>
<script>
var ul = document.getElementById("list");
//ul.getElementsByTagName("li") 不管层级关系
//ul.childNodes 是通过层级关系获取的 这种方式很好
//只是 他获取到的不只是我们想要的元素 还有其他东西
var lis = ul.children;//所有的子元素
//给所有的li 绑定排他事件
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseout=function(){
this.style.transform="scale(1)";
};
lis[i].onmouseover = function () {
//干掉所有人
for (var j = 0; j < lis.length; j++) {
lis[j].className = "";
lis[j].style.zIndex="";
}
//留下我自己
this.className = "current";
this.style.zIndex="1";//设置层级必须加定位啊！！！！
// this.style.transform="rotate(30deg)";
this.style.transform="scale(2)";
};
}
</script>
</body>
</html>