css点击隐藏div显示

CSS点击隐藏div显示是一种常见的页面交互效果，可以让网站更加具有用户友好性。下面我们来学习一下如何使用CSS实现这个效果。

<code>// 
HTML结构
<div class="container">
  <div class="content">
  
  <p>点击我显示/隐藏下面这段文字</p>
  
  <div class="hidden">这是需要隐藏的内容</div>
  </div>
</div>
// 
CSS样式
.container {
  width: 500px;
  margin: 0 auto;
}
.content {
  border: 1px solid gray;
  padding: 10px;
}
.hidden {
  display: none;
}
.content p {
  cursor: pointer;
}
.content p:hover {
  text-decoration: underline;
}
.content p.active + .hidden {
  display: block;
}
 

首先，在HTML结构中，我们需要将需要隐藏的内容放在一个div标签中，并设置它的class为“hidden”。接着，我们需要添加一个事件监听器，当用户点击p标签时，就会触发CSS中的.active类。

在CSS中，我们首先设置.container的宽度和居中，在.content中，我们将需要隐藏的元素隐藏起来，同时，设置内容的边框和内边距。在.content p中，我们将光标设置为手型，方便用户点击，并在hover时添加下划线。紧接着，我们使用+选择器，将.active类与.hidden类关联起来，这样，当用户点击p标签时，就能显示出需要隐藏的内容。

以上就是CSS点击隐藏div显示的实现方法，希望对大家有所帮助。