jquery - 选择div内的所有Li

Question

我需要为 div 内的所有 li 元素设置背景颜色。我很难到达列表项，因为渲染 li 时共享点会造成困惑。每个 li 都是共享点服务器控件渲染的结果。这本质上是一个顶部导航，有 6 个水平布局的菜单项，其中一些甚至还有子菜单项。

我需要在所有列表项上设置背景颜色，并在悬停时更改背景颜色，并在鼠标移开时更改回原始颜色。

<div id="zz16_HDRNav" class="s4-tn">
    <div class="menu horizontal menu-horizontal">
        <ul class="root static">
            <li class="static">
                <a class="static menu-item" href="/">
                    <span class="additional-background">
                    <span class="menu-item-text">Home</span></span>
                </a>
            </li>
            <li class="static dynamic-children">
                <a class="static dynamic-children menu-item" href="/finance">
                    <span class="additional-background">
                    <span class="menu-item-text">Employee Center</span></span>
                </a>
                <ul class="dynamic">
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/finance/EMEA"><span class="additional-background">
                            <span class="menu-item-text">Benefits</span></span>
                        </a>
                    </li>
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/finance/APAC"><span class="additional-background">
                            <span class="menu-item-text">Travel</span></span>
                        </a>
                    </li>
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/finance/CORP">
                            <span class="additional-background"><span class="menu-item-text">TSO</span></span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="static">
                <a class="static menu-item" href="/team">
                    <span class="additional-background">
                    <span class="menu-item-text">Business Communities</span></span>
                </a>
            </li>
            <li class="static dynamic-children">
                <span class="static dynamic-children menu-item"><span class="additional-background"><span class="menu-item-text">Internal Services</span></span></span>
                <ul class="dynamic">
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/regions/NA">
                            <span class="additional-background"><span class="menu-item-text">North America</span></span>
                        </a>
                    </li>
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/regions/me">
                            <span class="additional-background"><span class="menu-item-text">Middle East</span></span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="static">
                <a class="static menu-item" href="/it">
                    <span class="additional-background"><span class="menu-item-text">Best Practices</span></span>
                </a>
            </li>
            <li class="static">
                <a class="static menu-item" href="/legal">
                    <span class="additional-background"><span class="menu-item-text">PolicyProcedures</span></span>
                </a>
            </li>
        </ul>
    </div>
</div>  

Answer 1

在 CSS 中:

#zz16_HDRNav li{
       background-color: your color;
}

#zz16_HDRNav li:hover{
       background-color: your color;
}