主要问题，当鼠标离开菜单区域时，如何去掉主菜单中的背景颜色

同学你好，解决当鼠标离开主菜单时，去掉主菜单的背景色，可以在离开的onmouseout函数中，遍历子菜单，设置背景为none。js中的代码如：

// 封装一个代替getElementById()的方法
function byId(id) {
    // tupeof判断id是否为字符串，用三目运算返回
    return typeof(id) === "string"?document.getElementById(id):id;
}
  
// 设置一全局变量来获取当前的图片位置
var index = 0,
    timer = null,
    pics = byId("banner").getElementsByTagName("div"),  // 把这几个div放到数组当中
    dots = byId("dots").getElementsByTagName("span"),   // 小圆点
    prev = byId("prev"),
    next = byId("next"),
    len = pics.length,
    menu = byId("menu-content"),
    subMenu = byId("sub-menu"),
    innerBox = subMenu.getElementsByClassName("inner-box"),
    menuItems = menu.getElementsByClassName("menu-item");
  
  
function slideImg() {
    var main = byId("main");
    // 划过清除定时器，离开继续
    main.onmouseover = function () {
        // 划过清除定时器
        if (timer) clearInterval(timer);
    };
  
    // 划入一下开起切换
    main.onmouseout = function () {
        // setTimeout()超市定时器
        timer = setInterval(function () {
            index++;    // 必须在第一行，在后面判断
            if (index >= len) {
                index = 0;
            }
  
            // 切换图片
            changeImg();
        }, 3000);
    };
    // 自动在main上触发鼠标离开的事件
    main.onmouseout();
  
    // 遍历所有点击，且绑定点击事件，点击圆点切换图片
    for (var d = 0; d < len; d++) {
        // 给所有span添加一个id的属性，值为d，作为当前的span的索引
        dots[d].id = d;
        dots[d].onclick = function () {
            // 改变index为当前span的id值
            // alert(this.id); // 弹出当前id
            index = this.id;
            // 调用changeImg，实现切换图图片
            changeImg();
        }
    }
  
    // 下一张
    next.onclick = function () {
        index++;
        if (index >= len) {
            index = 0;
        }
        changeImg();
    }
    // 上一张
    prev.onclick = function () {
        index--;
        if (index < 0) {
            // 当index下标是第一张0的时候--进入判断，len长度-1是最后一张下标
            index = len-1;
        }
        changeImg();
    }
  
    // 导航菜单
    // 遍历主菜单，且绑定时间
    for (var m=0;m<menuItems.length;m++) {
        // 没每一个menu-item定义data-index属性，作为索引
        menuItems[m].setAttribute("data-index",m);
        menuItems[m].onmouseover = function () {
            subMenu.className = "sub-menu";
            var idx = this.getAttribute("data-index");
            // 遍历所有子菜单，将每一个都隐藏
            for (var j=0;j<innerBox.length;j++) {
                innerBox[j].style.display = 'none';
                menuItems[j].style.background = 'none';
            }
            menuItems[idx].style.background = 'rgba(0,0,0,0.1)';
            innerBox[idx].style.display = 'block';
        }
    }
  
  //去掉主菜单的背景色
    menu.onmouseout = function () {
        subMenu.className = "sub-menu hide";
        for(var  m=0;m<menuItems.length;m++){
           menuItems[m].style.background = 'none';
        }
          
    };
  
    subMenu.onmouseover = function () {
        this.className = "sub-menu";
    };
  
    subMenu.onmouseout = function () {
        this.className = "sub-menu hide";
    }
}
  
// 切换图片
function changeImg() {
    // 遍历banner下多有的div，将其隐藏
    // 遍历dots下所有的span，将div隐藏，将span清除类
    for (var i = 0; i < len; i++){
        pics[i].style.display = "none";
        dots[i].className = "";
    }
    // 根据index索引找到当前div，将其显示出来设为当前
    pics[index].style.display = 'block';
    // 根据index索引找到当前span，将其显示出来设为当前
    dots[index].className = "active";
}
  
slideImg();

如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~