<style type="text/css">
*{ margin:0px auto; padding:0px;}
#menu{ width:500px; height:50px;}
.item{ float:left;width:100px;height:50px;text-align:center;vertical-align:middle;line-height:50px;color:#FFF;background-color:#9FC}
</style>
</head>
<body>
<div id="menu">
<div class="item">首页</div>
<div class="item">产品中心</div>
<div class="item">新闻动态</div>
<div class="item">联系我们</div>
<div class="item">关于我们</div>
</div>
<script type="text/javascript">
var items = document.getElementsByClassName("item");
for(var i=0;i<items.length;i++){
items[i].onmouseover = function(){
//恢复所有
for(var i=0;i<items.length;i++){
items[i].style.backgroundColor = "#9FC";
}
//变当前
this.style.backgroundColor = "red";
}
}
//鼠标离开恢复颜色
for(var i=0;i<items.length;i++){
items[i].onmouseout = function(){
this.style.backgroundColor = "#9FC";
}
}
</script>
![](https://images2017.cnblogs.com/blog/1283297/201712/1283297-20171210164601427-1410973487.png)