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

Question

I have menu like here 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> 

I want to set background for hover elements. But I don't know how to set it for child elements. How can I use .cat-parent or .current-cat-parent class to fix it?

Answer 1

I am guessing a bit about what you want, but perhaps if you set the background color on the a elements, you can highlight each link without affecting a nested blocks of li 's.

I am assuming that you want to highlight the link text for each link in the lists.

 .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

You can use css :not() to prevent .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>