选择一个div内的所有Li

我需要在div内的所有li项目上设置背景颜色。我很难进入列表项，因为当li被渲染时，共享点会产生混乱。每个li都是SharePoint服务器控件呈现的结果。这基本上是一个顶部导航，其中6个菜单项横向布置，其中一些菜单项甚至包含子菜单项。选择一个div内的所有Li

我需要在所有列表项上设置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>

来源

2012-08-13 Athapali

你可以只用一些直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-13 14:38:56

这将设置所有锂的背景颜色的DIV

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

来源

2012-08-13 14:34:33 rahul

里面如果你需要做的是用jQuery，而不是CSS，我会做一个类：

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

然后在CSS：

.hover{ 
    background-color: green; 
}

来源

2012-08-13 14:35:18 Ohad

这应该处理一级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-13 14:37:15

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

div li { 
background-color:#CCC; 
} 

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

来源

2012-08-13 14:37:22

在CSS：

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

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

来源

2012-08-13 14:38:09 Zac

像这样的东西应该做的诀窍！ http://jsfiddle.net/BnJ3G/2/

干杯

来源

2012-08-13 14:40:39 Shannon

你应该使用hover()方法和利用类的hover样式。事情是这样的：

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

也就是说jQuery的解决方案，但我个人尝试使用直CSS悬停条件在其他的答案指出。

来源

2012-08-13 14:41:42

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-13 15:17:53 vitrum

选择一个div内的所有Li

回答

相关问题