Question

我正在尝试制作一个闪卡系统。我问一个问题，当点击问题时，它应该显示答案并隐藏问题。我现在使用此代码：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解决这个问题。我只对这个问题感兴趣：if / how如何仅使用css

Answer 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;
}

使用css替换click（而不是jquery）上的文本？

1 个答案: