css点击显示和隐藏div

可以使用CSS的:hover 伪类和display属性来实现点击显示和隐藏div的效果。以下是一个简单的例子：

HTML代码：

<div class="container">
  <div class="content">
    <!-- 这里是要隐藏或显示的内容 -->
  </div>
  <div class="toggle-button">点击显示/隐藏</div>
</div>

CSS代码：

.container {
  position: relative;
}

.content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
}

.container:hover .content {
  display: block;
}

.toggle-button {
  cursor: pointer;
}

解释一下这个代码：

- 首先，我们将 container 设置为相对定位，以便我们在其中创建一个绝对定位的 content 元素。
- content 元素被设置为 display: none; 隐藏。它的位置被设置为 absolute，并放置在 container 的底部。
- 当容器被悬停时，我们使用 container:hover .content 选择器将 content 元素的 display 属性设置为 block，从而显示它。
- 最后，我们添加了一个类名为 toggle-button 的元素，点击它将显示或隐藏 content 元素。你可以使用 JavaScript 来实现这个效果。