如何在css中显示/隐藏或显示/隐藏内容列表

Question

这是一个显示和隐藏内容的简单代码。当按钮悬停时，列表显示，但当我想通过我的列表(例如a或b或c)它(列表)将消失。我需要的东西是剩余的内容或者我的列表，当我浏览它的时候。有办法解决这个问题吗?

.hide {
display: none;
}
.myDiv:hover+.hide {
display: block;
color: red;
}

<ul>
<button class="myDiv">hover</button>
<div class="hide">
<li>a</li>
<li>b</li>
<li>c</li>
</div>
</ul>

我试过css代码

Answer 1

为了更好地理解，我重新组织了html结构和更新的css。请记住，我已经给display:inline-block到myDiv类限制100%的宽度。

.myDiv{
display: inline-block;
}
.hide {
display: none;
margin: 0;
}
.myDiv:hover .hide {
display: block;
color: red;
}

<div class="myDiv">
<button class="button">hover</button>
<ul class="hide">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>

Answer 2

当您在鼠标悬停按钮后尝试浏览列表项时，列表自然会被隐藏。这是因为一旦你移动光标到列表项目，按钮的悬停事件就会被移除。

所以要处理这个问题，你需要在父元素中添加悬停，在你的例子中是ul。

像这样:

<style>
.hide {
display: none;
}
ul:hover .hide {
display: block;
color: red;
}
</style>