如何在 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

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

所以要处理这个问题，您需要在您的案例中添加悬停

ul

.

像这样的东西：

<style>
  .hide {
    display: none;
  }

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

Answer 2

我重新组织了 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>