1

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

我需要在所有列表项上设置 bgcolor 并在悬停时更改 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>
4

9 回答 9

2

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

$('#YourdivId').find('li').hover(function () {
                            $(this).css({ 'background-color': 'gray' });
                        }, function () { $(this).css({ 'background-color': '' }); });
于 2012-08-13T14:34:33.850 回答
2

在 CSS 中：

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

#zz16_HDRNav li:hover{
       background-color: your color;
}
于 2012-08-13T14:38:09.113 回答
2

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

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

那是 jQuery 解决方案，尽管我个人尝试将直接 CSS 用于悬停条件，如其他答案中所述。

于 2012-08-13T14:41:42.153 回答
1

如果你需要使用 jQuery 而不是 CSS，我会使用一个类来做到这一点：

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

然后在css中：

.hover{
    background-color: green;
}
于 2012-08-13T14:35:18.870 回答
1

这应该处理第一级 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;
}
于 2012-08-13T14:37:15.897 回答
1

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

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

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

于 2012-08-13T14:38:56.283 回答
1

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

于 2012-08-13T15:17:53.703 回答
0

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

div li {
background-color:#CCC;
}

div li:hover {
background-color: #AAA;
}
于 2012-08-13T14:37:22.177 回答
0

像这样的东西应该可以解决问题！http://jsfiddle.net/BnJ3G/2/

干杯

于 2012-08-13T14:40:39.923 回答