在悬停时为多个项目添加addClass

Question

所以我整天都在研究这个剧本,我见过的所有例子似乎都没有做我想要的.这是我的示例CodePen.尝试将鼠标悬停在"MENUS"和"SETTINGS"上.我会试着用文字来解释这个问题:

剧本:

var activeItem = $("#menu .active");
var items = $("#menu .main:not(.active)");

activeItem.addClass("active-2");

items.hover(function () {
    "use strict";
    activeItem.toggleClass("active-2");
});

$(document).mousemove(function (event) {
    "use strict";
    if ($(".sub-1").css("background-clip").toLowerCase() == "content-box") {
        $(".sub-1").parents(".main").addClass("active-2");
        $(".sub-1").parents(".main").css("background-color", "#CCC");
    } else {
        $(".sub-1").parents(".main").removeClass("active-2");
        $(".sub-1").parents(".main").css("background-color", "");
    }
});

上面的代码给出active-2了活动项的蓝线(类).在这种情况下"家".该items变量计算所有未激活的主菜单项,并用于active-2在其他项目悬停时从"HOME" 切换蓝线().到现在为止还挺好.

问题:

我有子菜单项(深灰色).当鼠标位于这些子菜单项的任何位置时,我想给父主项目蓝线(active-2)直到鼠标离开,然后将蓝线返回到当前活动项目activeItem,在本例中为"HOME".

当只有1个子项目组(如"MENUS"下的那个)时,它可以工作.但当我添加第二个子菜单组(在"设置"下)时,它就破了.我正在寻找一种方法来实现它,所以无论我有多少个子菜单组,当鼠标悬停在子菜单项上activeItem时,主项目的蓝线应该是可见的,当我不再徘徊它时返回.如果您使用检查员删除其中一个ul带有.sub-1"MENUS"或"SETTINGS" 类别的s,它将再次开始工作.

为什么mousemove???

我试图.addClass在.hover和.removeClass在它的回调函数,但没有奏效...也许我只是不这样做是正确的？所以基本上我能想到的实现这种效果的唯一方法是用mousemove,检查被给予子项只有当他们看到毫无意义的CSS属性:

#menu li:hover > ul {
    left: auto;
    background-clip: content-box;
}

所以......我不知道如何让它以有意义的方式发挥作用.请帮忙.

编辑:

在问题的顶部提供了CodePen链接.

Answer 1

请在您的 codepen 中将 CSS 行 #329 替换为以下内容：

#menu li.main:hover > a:before, #menu .active > a:before {

JS 将是：

var activeItem = $("#menu .active");

items.hover(function () {
    activeItem.toggleClass("active");
});