Question

我有一个垂直的大型菜单。当您将鼠标悬停在包含子项的链接上时，它会在右侧显示另一个垂直菜单，依此类推。当您将鼠标悬停在相关的子菜单上时，它们将被隐藏，菜单将被重置。

我在父链接中添加了一个类，以便悬停状态保持活动状态，这样可以正常工作。但是，我的问题是具有子菜单的二级链接。我试图做同样的事情但是使用这些链接，但无论我尝试什么都不起作用。

这就是我想要实现的目标，请注意当第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解决方案的问题。我只想要一个能让它发挥作用的解决方案。

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代码。
将班级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

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

2 个答案: