的背景 <li> 元素-子元素

Question

我有像这里https://jsfiddle.net/z93hy4gh/的菜单。

 .widget li:hover { background:#002d5e; } 

 <div class="widget"> <ul class="product-categories"> <li class="cat-item cat-item-7 cat-parent current-cat-parent"><a href="http://strona.www/odzie/">Odzież </a> <ul class="children"> <li class="cat-item cat-item-13"><a href="http://strona.www/odziez/bluzy-kolorowe-i-biale/">Bluzy białe</a></li> <li class="cat-item cat-item-14"><a href="http://strona.www/odziez/bluzy-100-bawelna/">Bluzy 100% bawełna</a></li> <li class="cat-item cat-item-22"><a href="http://strona.www/odziez/bluzy-na-trok/">Bluzy na trok</a></li> <li class="cat-item cat-item-32"><a href="http://strona.www/odziez/spodnie-kolorowe-i-biale/">Spodnie kolorowe i białe</a></li> <li class="cat-item cat-item-68"><a href="http://strona.www/odziez/spodnie-100-bawelna/">Spodnie 100% bawełna</a></li> <li class="cat-item cat-item-33 current-cat"><a href="http://strona.www/odziez/spodnie-biale/">Spodnie białe</a></li> </ul> </li> <li class="cat-item cat-item-43"><a href="http://strona.www/fartuch-/">Fartuch </a></li> <li class="cat-item cat-item-44"><a href="http://strona.www/fartuch-p/">Fartuch </a></li> <li class="cat-item cat-item-8"><a href="http://strona.www/obuwie/">Obuwie </a></li> </ul> </div> 

我想为悬停元素设置背景。 但是我不知道如何为子元素设置它。 如何使用.cat-parent或.current-cat-parent类进行修复？

Answer 1

我在想些什么，但是如果您在a元素上设置背景色，则可以突出显示每个链接而不会影响li的嵌套块。

我假设您要突出显示列表中每个链接的链接文本。

 .widget .children li { background-color: yellow; /* demo only... */ display: block; } .widget .children li:hover { background: pink; } .widget .product-categories > li:hover:not(:first-child) { background-color: lightgreen; } .widget .product-categories > li:first-child a:hover { background-color: lightgreen; display: block; } 

 <div class="widget"> <ul class="product-categories"> <li class="cat-item cat-item-7 cat-parent current-cat-parent"><a href="http://strona.www/odzie/">Odzież </a> <ul class="children"> <li class="cat-item cat-item-13"><a href="http://strona.www/odziez/bluzy-kolorowe-i-biale/">Bluzy białe</a></li> <li class="cat-item cat-item-14"><a href="http://strona.www/odziez/bluzy-100-bawelna/">Bluzy 100% bawełna</a></li> <li class="cat-item cat-item-22"><a href="http://strona.www/odziez/bluzy-na-trok/">Bluzy na trok</a></li> <li class="cat-item cat-item-32"><a href="http://strona.www/odziez/spodnie-kolorowe-i-biale/">Spodnie kolorowe i białe</a></li> <li class="cat-item cat-item-68"><a href="http://strona.www/odziez/spodnie-100-bawelna/">Spodnie 100% bawełna</a></li> <li class="cat-item cat-item-33 current-cat"><a href="http://strona.www/odziez/spodnie-biale/">Spodnie białe</a></li> </ul> </li> <li class="cat-item cat-item-43"><a href="http://strona.www/fartuch-/">Fartuch </a></li> <li class="cat-item cat-item-44"><a href="http://strona.www/fartuch-p/">Fartuch </a></li> <li class="cat-item cat-item-8"><a href="http://strona.www/obuwie/">Obuwie </a></li> </ul> </div> 

Answer 2

您可以使用css :not()防止.cat-parent 。

 $(document).ready( function() { $('.cat-parent').click( function(event) { event.preventDefault(); $(this).toggleClass('opened'); }); }); 

 .widget li:not(.opened):hover { background: #002d5e; } .children { display: none; } .opened .children { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="widget"> <ul class="product-categories"> <li class="cat-item cat-item-7 cat-parent current-cat-parent"><a href="http://strona.www/odzie/">Odzież </a> <ul class="children"> <li class="cat-item cat-item-13"><a href="http://strona.www/odziez/bluzy-kolorowe-i-biale/">Bluzy białe</a> </li> <li class="cat-item cat-item-14"><a href="http://strona.www/odziez/bluzy-100-bawelna/">Bluzy 100% bawełna</a> </li> <li class="cat-item cat-item-22"><a href="http://strona.www/odziez/bluzy-na-trok/">Bluzy na trok</a> </li> <li class="cat-item cat-item-32"><a href="http://strona.www/odziez/spodnie-kolorowe-i-biale/">Spodnie kolorowe i białe</a> </li> <li class="cat-item cat-item-68"><a href="http://strona.www/odziez/spodnie-100-bawelna/">Spodnie 100% bawełna</a> </li> <li class="cat-item cat-item-33 current-cat"><a href="http://strona.www/odziez/spodnie-biale/">Spodnie białe</a> </li> </ul> </li> <li class="cat-item cat-item-43"><a href="http://strona.www/fartuch-/">Fartuch </a> </li> <li class="cat-item cat-item-44"><a href="http://strona.www/fartuch-p/">Fartuch </a> </li> <li class="cat-item cat-item-8"><a href="http://strona.www/obuwie/">Obuwie </a> </li> </ul> </div>