Jquery 选择div中的所有Li

我需要在div中的所有li项上设置背景色。我很难找到列表项，因为在呈现li时sharepoint会造成混乱。每个li都是sharepoint server控件呈现的结果。这基本上是一个顶部导航，6个菜单项水平排列，其中一些甚至有子菜单项

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

<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>  

内部服务

这将设置div中所有li的背景色

$('#YourdivId').find('li').hover(function () {
                            $(this).css({ 'background-color': 'gray' });
                        }, function () { $(this).css({ 'background-color': '' }); });

---

这将设置div中所有li的背景色

$('#YourdivId').find('li').hover(function () {
                            $(this).css({ 'background-color': 'gray' });
                        }, function () { $(this).css({ 'background-color': '' }); });

---

如果您需要使用jQuery而不是CSS来实现这一点，我会使用一个类：

$('div li').css({'background-color':'red'})
       .hover(function(){ 
             $(this).toggleClass('hover')
             });

然后在css中：

.hover{
    background-color: green;
}

---

如果您需要使用jQuery而不是CSS来实现这一点，我会使用一个类：

$('div li').css({'background-color':'red'})
       .hover(function(){ 
             $(this).toggleClass('hover')
             });

然后在css中：

.hover{
    background-color: green;
}

---

这应涉及第一级LI项目：

div.s4-tn div.menu ul.root li.static {
    background-color:red;
}

div.s4-tn div.menu ul.root li.static:hover {
    background-color:blue;
}

---

这应涉及第一级LI项目：

div.s4-tn div.menu ul.root li.static {
    background-color:red;
}

div.s4-tn div.menu ul.root li.static:hover {
    background-color:blue;
}

---

为什么要使用jQuery？只需使用CSS：

div li {
background-color:#CCC;
}

div li:hover {
background-color: #AAA;
}

---

为什么要使用jQuery？只需使用CSS：

div li {
background-color:#CCC;
}

div li:hover {
background-color: #AAA;
}

在css中：

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

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

在css中：

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

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

---

您只需使用一些直接的CSS即可：

#zz16_HDRNav>.menu>ul>li
{
    background-color:gray;
}
#zz16_HDRNav>.menu>ul>li :hover
{
    background-color:red;
}

---

Fiddle:

您可以使用一些直接的CSS：

#zz16_HDRNav>.menu>ul>li
{
    background-color:gray;
}
#zz16_HDRNav>.menu>ul>li :hover
{
    background-color:red;
}

---

小提琴手：

像这样的东西应该就可以了

---

干杯

像这样的东西应该能奏效

---

干杯

您可能应该使用

hover（）

方法，并为您的悬停样式使用一个类。大概是这样的：

$("#zz16_HDRNav li").hover(
    function() {
        $(this).addClass('yourHoverClass');
    },
    function() {
        $(this).removeClass('yourHoverClass');
    }
);

---

这就是jQuery的解决方案，尽管我个人尝试对悬停条件使用直接CSS，如其他答案中所述。

您可能应该使用

hover（）

方法，并为悬停样式使用类。大概是这样的：

$("#zz16_HDRNav li").hover(
    function() {
        $(this).addClass('yourHoverClass');
    },
    function() {
        $(this).removeClass('yourHoverClass');
    }
);

这就是jQuery的解决方案，尽管我个人尝试使用直接CSS作为悬停条件，如其他答案所述。

CSS:

ul.dynamic {display:none}
.root li { width:auto; float:left; margin:4px; display:block;}
.menu { width:780px}
.yourclass { background:#ffbbcc; color:#aaffcc;}
.root li.dynamic { width:100px; clear:left}
li.dynamic:hover { background:#aaffcc;color:#ffbbcc;}

JavaScript:

jQuery('li.static').live('hover', function() {
    jQuery('li.static').find("ul.dynamic").hide();
    jQuery('li.static').removeClass('yourclass');       
    jQuery(this).addClass('yourclass');
    jQuery(this).find("ul.dynamic").show();
});

CSS:

ul.dynamic {display:none}
.root li { width:auto; float:left; margin:4px; display:block;}
.menu { width:780px}
.yourclass { background:#ffbbcc; color:#aaffcc;}
.root li.dynamic { width:100px; clear:left}
li.dynamic:hover { background:#aaffcc;color:#ffbbcc;}

JavaScript:

jQuery('li.static').live('hover', function() {
    jQuery('li.static').find("ul.dynamic").hide();
    jQuery('li.static').removeClass('yourclass');       
    jQuery(this).addClass('yourclass');
    jQuery(this).find("ul.dynamic").show();
});