css点击文字弹出内容

CSS点击文字弹出内容是制作网页互动效果的一种常见方法，可以让用户进一步了解网站或页面内容。下面我们将为大家介绍如何使用CSS实现点击文字弹出内容的效果。

HTML部分：
<div class="info-box">
  <p>点击这里可以显示隐藏内容</p>
  <p class="hidden-info">这里是隐藏的内容，点击上面的文字可以看到我哦！</p>
</div>
CSS部分：
.info-box {
  position: relative;
}
.hidden-info {
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.info-box:hover .hidden-info {
  display: block;
}
 

首先，我们在HTML中创建包含触发按钮和隐藏内容的容器元素（这里我们使用了一个div元素），分别使用p元素来包装文本内容。为了实现更好的效果，我们为容器元素（info-box）添加了position: relative;。

在CSS中，我们首先为.hidden-info设置了display: none;，使其在页面最开始时不可见。之后，我们为.hidden-info指定了position: absolute;、top: 20px;和left: 0;，使其相对于父元素（.info-box）水平居左并离顶部有20像素的距离，并且使其可以跟随父元素进行定位。此外，我们还设置了.hidden-info的padding、background-color和border等样式，以及box-shadow实现一个漂亮的阴影效果。

接着，我们使用:hover伪类为.info-box添加了一个鼠标悬停事件，当鼠标悬停在.info-box上时，.hidden-info就会被设置为display: block;，从而实现了点击文字弹出内容的效果。

在实际开发中，我们可以根据需要对CSS样式进行调整，使这个效果更符合项目要求。