使用 css 替换点击时的文本（而不是 jquery）？答案

【问题标题】：Using css for replacing text on click (instead of jquery)?使用 css 替换点击时的文本（而不是 jquery）？
【发布时间】：2013-06-28 23:38:44
【问题描述】：

我正在尝试制作一个抽认卡系统。我问了一个问题，当点击问题时，它应该显示答案并隐藏问题。我现在使用这个代码：jsFiddle

<p id="shown">What is stackoverflow?</p>


<script>
$("#shown").click(function () {
    $(this).replaceWith("<p>A language-independent collaboratively edited question and answer site for programmers.</p>" );
});
</script>

这工作正常，但在阅读 this 之后。我认为仅使用 css 就可以做到这一点。我试过了，但我失败了。

我还想添加一些其他功能。如果点击答案，问题应该会再次出现，而答案应该被隐藏。

如果 css 无法做到这一点，我可以自己用 jquery 解决这个问题。我只对这个问题感兴趣：如果/如何仅使用 css 就可以了

【问题讨论】：

如果你打算添加其他功能，你应该坚持使用 jQuery...
更改样式和元素的内容是两件不同的事情。有了一些显示和隐藏的魔法，CSS3 可能是可能的，但 IMO 你应该坚持使用 JS。
@Zenith 这是我要添加的唯一功能。

标签： jquery html css click show-hide

【解决方案1】：

jsfiddle

将其用作 html：

<input type="checkbox" id="toggle">

<label id="shown" for="toggle">
    What is stackoverflow?
</label>
<label id="hidden" for="toggle" >
   A language-independent collaboratively edited question and answer site for programmers.
</label>

这对于 css：

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

#shown {
    display: block;
}
#hidden {
    display: none;
}

#toggle:checked ~ #hidden{
   display: block;
}

#toggle:checked ~ #shown {
   display: none;
}

【讨论】：