<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>
