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

debugcn 发表于 Dev

马辛·库苏亚（Marcin Kusuah）

.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类进行修复？

马克·奥德（Marc Audet）

我在想些什么，但是如果您在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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。