Question

我有这个样本：

＆＃13;

.show:hover .list-categories {
  max-height: inherit;
  opacity: 1;
}
.list-categories {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: opacity 300ms ease;
}

＆＃13;

<div class="show">show div</div>
<ul class="list-categories">
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
</ul>

＆＃13;

此代码不起作用。我想在将鼠标悬停在项目＆＃34; .show＆＃34;

上时显示列表

如果你把开关放在表格中（.show：hover + .list-categories）它可以工作......但我不想加号。

如何在不使用加号的情况下更改此代码？

Answer 1

您需要使用相邻的兄弟选择器+符号，供您参考，请查看此链接https://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

＆＃13;

.show:hover + .list-categories{
  max-height: inherit;
  opacity: 1;
}

.list-categories{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: opacity 300ms ease;
}

＆＃13;

<div class="show">show div</div>
<ul class="list-categories">
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
</ul>

＆＃13;

Answer 2

根据您的CSS，您可以像下面一样更改HTML。

＆＃13;

<div class="show">show div
<ul class="list-categories">
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
</ul> 
</div>

＆＃13;

{{1}}

＆＃13;

Answer 3

add_filter('woocommerce_update_order_review_fragments', 'price_bottom_checkout'); function price_bottom_checkout($arr) { global $woocommerce; $the_total = ''; foreach ($woocommerce->cart->cart_contents as $cart_item) { $the_total = $cart_item['line_total']; break; } $price_txt = '<span class="total-pay">'.wc_price($the_total).'</span>'; $arr['.total-pay'] = $price_txt; return $arr; }将选择+后立即放置的所有.list-categories，.show将选择~之前的所有.list-categories。< / p>

＆＃13;

.show

＆＃13;

.show:hover ~ .list-categories{
  max-height: inherit;
  opacity: 1;
}

.list-categories{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: opacity 300ms ease;
}

＆＃13;

Answer 4

用下面的css替换你的css：

.show:hover+.list-categories{
  max-height: inherit;
  opacity: 1;
}

.list-categories{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: opacity 300ms ease;
}

Answer 5

你有没有特别的理由想要加号？使用你的html是不可能的。如果你真的不想要它，请使用这个html。

    <div class="show">show div
<ul class="list-categories">
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
</ul>  
  </div>

项目悬停时显示列表

5 个答案: