当子 LI 悬停在上方时，如何保持除第一个 LI 之外的所有父级突出显示答案

【问题标题】：How to keep all the parent except the first LI highlighted when the sub LI is hovered over当子 LI 悬停在上方时，如何保持除第一个 LI 之外的所有父级突出显示
【发布时间】：2016-05-19 22:10:05
【问题描述】：

HTML：

<ul id="ulMenu">
    <li class="parent">
        <a href="">Software Update</a>
        <ul class="ulSubMenu">
            <li>
                <a href="">2010</a>
                <ul class="ulSubMenu">
                    <li>
                        <a href="">Version 1</a>
                        <ul class="ulSubMenu">
                            <li><a href="">Ver 1 Complete</a></li>
                            <li><a href="">Ver 1 Not Yet</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="">2011</a>
                <ul class="ulSubMenu">
                    <li>
                        <a href="">Version 1</a>
                        <ul class="ulSubMenu">
                            <li><a href="">Ver 1 Complete</a></li>
                            <li><a href="">Ver 1 Not Yet</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS：

ul.ulSubMenu > li > a:hover
{
      background-color: #008AAC;
      color: #C5F3FF;
}
.active {
    background-color: #008AAC;
    color: #C5F3FF;
}

JQuery:

我想添加一个脚本，它将子菜单类的任何父 LI 设置为 active 除了父 LI

例如，如果我将“Ver 1 Complete”悬停在 2010 部分下，它将使用 hover css 更改样式。我还想为第 1 版和 2010 LI 类 active 制作相同的样式。

我该怎么做。

【问题讨论】：

因为您已经标记了问题：jquery...
仍然不完全确定要问什么
如果我将鼠标悬停在 Ver 1 Complete 上，我希望所有父 LIs 分别拥有 active 类，除了第一个。

标签： jquery html css

【解决方案1】：

我将我的 CSS 更新为以下内容：

ul.ulSubMenu > li > a {
    text-decoration: none;
    background-color: #C5F3FF;
    border: 1px solid #53E1FF;
    border-top: none;
    color: #008AAC;
    display: block;
    font-size: 12px;
    line-height: 15px;
    padding: 10px 12px;
    cursor: pointer;
}

ul.ulSubMenu > li:hover
{
    background-color: #008AAC;
    color: #C5F3FF;
}
ul.ulSubMenu > li:hover > a
{
    color: #C5F3FF;
    background-color: #008AAC;
}

【讨论】：

【解决方案2】：

您只需更改您的 .active 规则以应用于所有悬停的 li 元素。

ul.ulSubMenu li:hover,
.active {
    background-color: #008AAC;
    color: #C5F3FF;
}

这应该可以按你的意愿工作，因为当你将鼠标悬停在一个元素上时，它的所有父元素也会悬停。

【讨论】：

它还没有创建 .active 类，据我了解，OP 试图实现该类，只需将整个 li 悬停即可
谢谢，但我不希望在 Software Update 和悬停的 LI 之间进行任何更改。
@SiKni8 你真的测试过代码吗？请参阅jsfiddle.net/gaby/eqjm0uk8 它不影响“软件更新”。如果您只想影响a 标签而不是整个li，另请参阅jsfiddle.net/gaby/eqjm0uk8/1
@GabyakaG.Petrioli 你是对的，我没有测试它。谢谢...现在测试它。
jsfiddle.net/eqjm0uk8/3我有这个，但我不希望孩子被改变。将鼠标悬停在子项上时，只有父项发生了变化。