javascript - addClass 悬停在多个元素上

Question

所以我整天都在处理这个脚本，但我看到的所有示例似乎都没有达到我想要的效果。这是我的例子 CodePen .尝试将鼠标悬停在“菜单”和“设置”上。我会尝试用文字来解释这个问题:

脚本:

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", "");
    }
});

上面的代码将蓝线 (class active-2) 赋予了事件项。在这种情况下是“HOME”。 items 变量计算所有未激活的主菜单项，并用于在其他元素悬停时从“HOME”切换蓝线(active-2)。到目前为止一切顺利。

问题:

我有子菜单项(深灰色的)。当鼠标在这些子菜单项上的任何位置时，我想给父主项蓝线 (active-2) 直到鼠标离开，然后将蓝线返回到当前事件的元素 activeItem，在本例中为“HOME”。

当只有 1 子项组(如“MENUS”下的那个)时，它起作用。但是当我添加第二个子菜单组(在“设置”下)时，它坏了。我正在寻找一种方法来实现它，因此无论我有多少个子菜单组，当我的鼠标悬停在它的子菜单项上时，主项的蓝线应该是可见的，并在我返回时返回 activeItem不再盘旋它。如果您使用检查器在“MENUS”或“SETTINGS”下删除类为 .sub-1 的 ul 之一，它将再次开始工作。

为什么 mousemove？？？

我尝试在 .hover 中添加 .addClass 并在其回调函数中添加 .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");
});