html - 当元素悬停时显示列表

Question

我有这个样本:

link

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

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

此代码无效。我想在悬停在“.show”项上时显示列表

如果您将开关置于 (.show:hover +.list-categories) 形式中，它会起作用...但我不想要加号。

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

Answer 1

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

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

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