我有这个样本:
.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) 形式中,它会起作用...但我不想要加号。
如何在不使用加号的情况下更改此代码?
最佳答案
您需要使用相邻兄弟选择器 +
符号,供您引用查看此链接 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>
关于html - 当元素悬停时显示列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41801034/