Question

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

我猜你想要什么，但是如果你在a元素上设置背景颜色，你可以突出显示每个链接而不影响li＆＃39;的嵌套块。第

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

2 个答案: