将悬停类添加到二级菜单链接答案

【问题标题】：Add hover class to 2nd level menu links将悬停类添加到二级菜单链接
【发布时间】：2015-09-24 10:51:28
【问题描述】：

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

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

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

这是我正在使用的 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 解决方案没有任何问题。我只想要一个让它发挥作用的解决方案。

【问题讨论】：

使用 CSS 和绝对没有 javascript 会非常更简单
一个 CSS 解决方案可以更简单地完成这项工作。例如。 codepen.io/lisa_c/pen/QwyoQq
@JaromandaX 欢迎任何解决方案！
这是一个关于 SO：stackoverflow.com/questions/9100344/…

标签： javascript jquery html css hover

【解决方案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>

【讨论】：

【解决方案2】：

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

我做了什么：

删除您为此悬停功能添加的所有 JS 代码。
将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

【讨论】：