使用JavaScript更改第一个同级的CSS类

我想为导航菜单制作一个javascript。 当用户将鼠标悬停在

上时，

元素应该具有CSS类“header menu sublist hover”。 我试图通过选择索引为0的触发javascript的div的同级，然后将类添加到其中来解决这个问题。 调试该类时，该类不会添加到链接中

HTML:

---

您可以在div上使用锚标记一个id并调用此函数来更改mouseover上的锚类名称

---

您的代码有几处错误。parentElement不是jQuery函数，parent（）是。此外，等式（0）不会选择第一个子项。您可以使用find（）代替

考虑到这一点，函数的第一行看起来更像这样：

var CategoryLink = $(this).parent().first();

或

---

您好，虽然答案被接受，但您可以只使用css实现这一点，那么为什么您需要编写javascript代码，下面是一个示例，您只需要应用此css行

li.HeaderCategoryLink+第一级{
显示：无；
}
li.HeaderCategoryLink:悬停+.第一级{
显示：块；
}

您可以使用pseudo class

：hover

。这是my navigaion无序列表的一个列表项。如果我这样做，我会给每个链接一个唯一的ID。对吗？不一定。只有更改类名的元素才需要id，但是如果稍微编辑一下，就可以使用相同的函数。你能解释一下你想做什么吗？我编辑了HTML，它是一个包含类别的菜单，这些有子类别，也有子类别。是的，这就是我的意思。好的，我要编辑答案，您可能还希望列表项有一个onmouseout事件，这样当它没有悬停在上面时，就不会出现错误的颜色。@Orlando嘿，您可以在这里签出答案，只需css代码

function SublistMouseenter()
{
    var CategoryLink = $(this).parentElement.eq(0);
    CategoryLink.addClass('header-menu-sublist-hover');
    $(this).mouseleave(function () {
        CategoryLink.removeClass('header-menu-sublist-hover');
    });
};

function SublistMouseenter(myAnchorsID) {
    if (document.getElementById(myAnchorsID).className == "HeaderCategoryLink") {
        document.getElementById(myAnchorsID).className = "header-menu-sublist-hover";
    } else {
        document.getElementById(myAnchorsID).className = "HeaderCategoryLink";
    }
}

var CategoryLink = $(this).parent().first();

var CategoryLink = $(this).parent().find('a.HeaderCategoryLink');)