выбрать все Li внутри div

Мне нужно установить цвет фона для всех элементов li внутри div. Мне трудно добраться до элемента списка из-за того, что sharepoint share создается при визуализации li. Каждый li является результатом рендеринга управления сервером sharepoint. Это, по сути, верхняя навигация с 6 пунктами меню, расположенными горизонтально, и некоторые из них даже имеют элементы подменю.выбрать все Li внутри div

Мне нужно установить 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; 
}

Fiddle: 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() и использовать класс для ваших стилей парить. Что-то вроде этого:

$("#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

выбрать все Li внутри div

ответ

Смежные вопросы