html - <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 的嵌套 block 的。

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

.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>