添加悬停 class 到二级菜单链接

Question

我有一个垂直的大型菜单。当您将鼠标悬停在具有子项的 link 上时，它会在右侧显示另一个垂直菜单，依此类推。当您将鼠标悬停在那些关联的子菜单之外时，它们会隐藏并且菜单会重置。

我正在向父级 link 添加一个 class 以便悬停状态保持活动状态，这工作正常。但是，我的问题是具有子菜单的第 2 级 link。我正在尝试做完全相同的事情，但使用这些 links 但无论我尝试什么似乎都不起作用。

这就是我想要实现的，请注意当第 3 级菜单打开时，第 2 级页面 link 的背景是粉红色的：

这是我正在使用的 JS 和随附的 JSFiddle，向您展示我目前所处的阶段：http://jsfiddle.net/mz9abf43/2/

$( ".menu li.menu-item-has-children a, .menu li.menu-item-has-children > .drop" ).mouseover(function() {
    $('.menu li.menu-item-has-children a').addClass('go');
    $('.menu li.menu-item-has-children > .drop a').removeClass('go');
});

$( ".menu li.menu-item-has-children > .drop a" ).mouseover(function() {
    $('.menu li.menu-item-has-children > .drop a').addClass('go');
});

$( ".menu li.menu-item-has-children > *" ).mouseout(function() {
    $('.menu li.menu-item-has-children a').removeClass('go');
});

更新我不致力于我一直在修补的 JS 解决方案，因此 CSS 解决方案没有问题。我只想要一个让它工作的解决方案。

Answer 1

基本解决方案，您可以将其与您需要的任何其他样式相辅相成

/* Hide all child lists */
li > ul {
    display: none;
}

/* Hovering list item will cause the child menu to be displayed */
li:hover > ul {
    display: block;
}

/* Default style for the menu item */
li {
    color: black;
}

/* Hover style for each menu item, add more if you have more levels */
ul > li:hover,
ul > li > ul > li:hover,
ul > li > ul > li > ul > li:hover {
    color: red;
}

<ul>
    <li>
        Item 1
        <ul>
            <li>
                Item 1 a
            </li>
            <li>
                Item 1 b
                <ul>
                    <li>
                        Item 1 b I
                    </li>
                    <li>
                        Item 1 b II
                    </li>
                    <li>
                        Item 1 b III
                    </li>
                </ul>                
            </li>
            <li>
                Item 1 c
            </li>
        </ul>
    </li>
    <li>
        Item 1
    </li>
    <li>
        Item 1
    </li>
</ul>

Answer 2

简单的解决方案如下所示 css，

我做了什么：

删除您为此悬停功能添加的所有 JS 代码。
将 class highlight 添加到所有需要在悬停时突出显示 (background-color:pink) 的元素。

CSS 代码：

.highlight:hover {
         background: pink;
}

//comment below css styles
/*.menu li a:hover,
.menu li a.go { background: pink;  }*/

Live Demo @ JSFiddle

添加悬停 class 到二级菜单链接

Add hover class to 2nd level menu links

html

javascript

css

jquery

hover