菜单，鼠标移上变背景色，离开恢复，用JS的方式

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

js鼠标事件/onclick/鼠标点击/光标移开 2021-11-15
CSS3－渐变背景色 2021-12-22
css3背景色渐变 2021-09-16
js自定义鼠标右键菜单 2021-09-10
C# 如何添加PPT背景（纯色背景、渐变色背景、图片背景） 2021-10-17
css最简单的在背景图片上显示模糊背景色的方法 2021-11-19
Eclipse背景颜色修改 eclipse 改变颜色，背景 2021-12-10
改变SecureCRT的背景颜色 2021-08-03