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

在轮播图最后，有个问题老师没有解决，就是当鼠标离开子菜单时，主菜单背景颜色应该被去掉，同时在鼠标离开主菜单时，主菜单背景颜色也应该去掉，这个要怎么去实现？

慕粉2213397909 2019-01-12

源自：项目：JavaScript轮播图 5-4 二级菜单的展开与收起

收起

1回答

好帮手慕阿满回答被采纳获得+3积分 2019-01-13 12:27:25

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

// 封装一个代替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();

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

收起回答

慕粉2213397909 提问者 #1

但是这样做的话，好像还存在一个问题，就是当我鼠标滑向子菜单时，也会将主菜单中的背景颜色去掉，而此时我是需要让主菜单背景颜色显示的，这样我才能显示当前子菜单是属于哪个主菜单的，这个要怎么实现，老师您这种做法我在提问之前也尝试过，不行，不能达到我上面描述的效果

2019-01-13 12:55:18
慕粉2213397909 提问者 #2

刚刚已经自行解决了，为自己鼓掌，加油！！！哈哈哈

2019-01-13 13:40:10