CSS 如何仅使用CSS实现收起引用

在本文中，我们将介绍如何使用纯CSS实现收起引用的效果。这样的效果在网页设计中经常用于隐藏重要信息，用户需要点击或悬停在特定区域才能显示出来。通过运用CSS的一些属性和伪元素，我们可以轻松实现这个效果。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用checkbox和label实现折叠效果

我们可以使用checkbox和label这两个HTML元素来实现收起引用的效果。通过组合它们与CSS的选择器，我们可以轻松地做到只用CSS折叠引用。

HTML结构如下：

<input type="checkbox" id="spoiler" />
<label for="spoiler">点击这里查看引用内容</label>
<div class="spoiler-content">
    <p>这里是隐藏的引用内容。</p>
</div>

CSS代码如下：

.spoiler-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s;
}

input[type="checkbox"]:checked ~ .spoiler-content {
    height: auto;
    opacity: 1;
}

通过设置.spoiler-content的height为0并将overflow设为hidden，我们将引用内容隐藏起来。当复选框被选中时，我们使用选择器input[type="checkbox"]:checked ~ .spoiler-content来选择.spoiler-content的兄弟元素，并将其height设置为auto，使得内容可见。

使用hover实现悬停效果

与使用复选框和标签实现收起效果类似，我们也可以使用CSS的伪元素:hover来实现悬停效果。

HTML结构如下：

<div class="spoiler-container">
    <div class="spoiler-header">悬停这里查看引用内容</div>
    <div class="spoiler-content">
        <p>这里是隐藏的引用内容。</p>
    </div>
</div>

CSS代码如下：

.spoiler-container .spoiler-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s;
}

.spoiler-container:hover .spoiler-content {
    height: auto;
    opacity: 1;
}

通过设置.spoiler-container .spoiler-content的height为0并将overflow设为hidden，我们将引用内容隐藏起来。当鼠标悬停在.spoiler-container上时，我们使用选择器.spoiler-container:hover .spoiler-content来选择.spoiler-content，并将其height设置为auto，使得内容可见。

使用伪元素实现自定义样式

除了使用复选框和悬停效果，我们还可以通过CSS的伪元素来实现自定义样式的收起引用。

HTML结构如下：

<div class="spoiler-box">
    <div class="spoiler-content">
        <p>这里是隐藏的引用内容。</p>
    </div>
</div>

CSS代码如下：

.spoiler-box {
    position: relative;
}

.spoiler-box::before {
    content: '点击这里查看引用内容';
    background-color: lightgray;
    color: black;
    padding: 5px;
    cursor: pointer;
    position: absolute;
    top: 0;
}

.spoiler-box:hover::before {
    display: none;
}

.spoiler-box .spoiler-content {
    display: none;
    padding: 10px;
    background-color: lightgray;
    color: black;
}

.spoiler-box:hover .spoiler-content {
    display: block;
}

通过设置.spoiler-box::before的content属性来设置显示的文本，并通过position属性将其定位在容器的顶部。当鼠标悬停在.spoiler-box上时，我们使用选择器.spoiler-box:hover::before来选择::before伪元素，并将其display设为none，隐藏显示的文本。同时，我们定义了.spoiler-box .spoiler-content的样式，当鼠标悬停在.spoiler-box上时，通过选择器.spoiler-box:hover .spoiler-content将其显示出来。