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

9vw9lbht 于 2023-04-08 发布在其他

关注(0)|答案(2)|浏览(160)

这是一个简单的代码来显示和隐藏内容.当按钮悬停列表显示，但当我想通过我的列表（例如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代码试了一下

2条答案

这是很自然的，当你试图通过列表项后，悬停按钮列表被隐藏。这是因为一旦你移动光标列表项悬停事件的按钮被删除。
因此，要处理这个问题，您需要在父对象中添加hover（在您的示例中为ul）。
就像这样：

<style>
  .hide {
    display: none;
  }

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

为了更好的理解，我重新组织了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>