Question

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

例如，如果我悬停＆＃34; Ver 1 Complete＆＃34;在2010年版块下，它将使用hover css更改样式。我还想为版本1和2010 LI的类active制作相同的样式。

我该怎么做。

Answer 1

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

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

这应该可以正常工作，因为当您将鼠标悬停在某个元素上时，其所有父项也会被悬停。

Answer 2

我将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;
}

如何在子LI悬停时突出显示除第一个LI之外的所有父项

2 个答案: