Background for <li> elements - child elements - html

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">Odzież
<ul class="children">
<li class="cat-item cat-item-13">Bluzy białe</li>
<li class="cat-item cat-item-14">Bluzy 100% bawełna</li>
<li class="cat-item cat-item-22">Bluzy na trok</li>
<li class="cat-item cat-item-32">Spodnie kolorowe i białe</li>
<li class="cat-item cat-item-68">Spodnie 100% bawełna</li>
<li class="cat-item cat-item-33 current-cat">Spodnie białe</li>
</ul>
</li>
<li class="cat-item cat-item-43">Fartuch </li>
<li class="cat-item cat-item-44">Fartuch </li>
<li class="cat-item cat-item-8">Obuwie </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">Odzież
<ul class="children">
<li class="cat-item cat-item-13">Bluzy białe</li>
<li class="cat-item cat-item-14">Bluzy 100% bawełna</li>
<li class="cat-item cat-item-22">Bluzy na trok</li>
<li class="cat-item cat-item-32">Spodnie kolorowe i białe</li>
<li class="cat-item cat-item-68">Spodnie 100% bawełna</li>
<li class="cat-item cat-item-33 current-cat">Spodnie białe</li>
</ul>
</li>
<li class="cat-item cat-item-43">Fartuch </li>
<li class="cat-item cat-item-44">Fartuch </li>
<li class="cat-item cat-item-8">Obuwie </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">Odzież
<ul class="children">
<li class="cat-item cat-item-13">Bluzy białe
</li>
<li class="cat-item cat-item-14">Bluzy 100% bawełna
</li>
<li class="cat-item cat-item-22">Bluzy na trok
</li>
<li class="cat-item cat-item-32">Spodnie kolorowe i białe
</li>
<li class="cat-item cat-item-68">Spodnie 100% bawełna
</li>
<li class="cat-item cat-item-33 current-cat">Spodnie białe
</li>
</ul>
</li>
<li class="cat-item cat-item-43">Fartuch
</li>
<li class="cat-item cat-item-44">Fartuch
</li>
<li class="cat-item cat-item-8">Obuwie
</li>
</ul>
</div>