html动画注释表单

我有html：

 <a href="#" class="addcomment">Add Comment</a>
<div id="addcomment">
<form name="comment" action="" method="post">
<input type="text" name="addcomment" size="80" />
<input type="submit" value="Comment"/>
</form>  
</div>

我想让评论表单像stackoverflow一样。单击“添加注释”时，应显示表单

---

当我这样做并单击“添加注释”时，注释表单出现，但当我释放鼠标单击时，表单消失，只显示“添加注释”。单击“添加注释”后，如何使注释表单显示使用复选框和

：checked

选择器：

#添加注释{
显示：无；
}
#addcomment：目标{
显示：块；
}
标签[for=addcommentbox]{
光标：指针；
}
#添加评论框{
显示：无；/*防止出现复选框*/
}
#addcommentbox:选中+#addcomment{
显示：块；
位置：绝对位置；
顶部：5px；
}

添加注释

：仅当按住鼠标按钮时，才会应用active

伪类。如果你想要一个纯粹的HTML/CSS解决方案，可以选择

：target

伪类或复选框hack（研究关键字）。。。复选框被显示，如果有两种形式，无论我点击哪个，第一种形式被打开，相同的问题在鼠标点击释放后消失…我的演示正常工作。请确认您有正确的CSS。如果有多个表单，请使用类而不是ID。

#addcomment {
display : none;
}
#addcomment:target {
display : block;
}
.addcomment:active + #addcomment {
display : block;
position : absolute;
top : 5px;
}