Question

我需要在div中的所有li项目上设置背景颜色。我很难到达列表项，因为在渲染li时会产生混乱的sharepoint。每个li都是sharepoint服务器控件呈现的结果。这本质上是一个顶部导航，水平布局了6个菜单项，其中一些甚至还有子菜单项。

我需要在所有列表项上设置bgcolor并在悬停时更改bg颜色并在mouseout上更改回原始颜色。

<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

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

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

Answer 2

在css中：

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

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

Answer 3

您应该使用hover()方法并为您的悬停样式使用一个类。像这样：

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

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

Answer 4

如果您需要使用jQuery而不是CSS，我会用类来完成：

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

然后在css中：

.hover{
    background-color: green;
}

Answer 5

这应该处理第一级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;
}

Answer 6

你可以直接使用一些CSS：

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

小提琴：http://jsfiddle.net/johnkoer/XgExk/7/

Answer 7

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();
});

jsfiddle

Answer 8

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

div li {
background-color:#CCC;
}

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

Answer 9

这样的事情应该成功！ http://jsfiddle.net/BnJ3G/2/

干杯

在div中选择所有Li

9 个答案: