Question

我有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>

和我的css：

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

我想在stackoverflow中创建评论表单。当我点击添加评论时，表格应该出现。

当我这样做并点击＆＃34;添加评论＆＃34;注释表单出现但当我发布鼠标时单击该表单仅消失＆＃34;添加评论＆＃34;显示。如何点击＆＃34;添加评论＆＃34;

后，如何显示评论表单

Answer 1

使用复选框和:checked选择器：

＆＃13;

#addcomment{
  display: none;
}
#addcomment:target{
  display: block;
}
label[for=addcommentbox]{
  cursor: pointer;
}
#addcommentbox{
  display: none; /* Prevent the checkbox from appearing */
}
#addcommentbox:checked + #addcomment{
  display: block;
  position: absolute;
  top: 5px;
}

＆＃13;

<label for="addcommentbox">Add Comment</label><input type="checkbox" class="addcomment" id="addcommentbox">
<div id="addcomment">
  <form name="comment" action="" method="post">
  <input type="text" name="addcomment" size="80" />
  <input type="submit" value="Comment"/>
</form>

＆＃13;

文档：https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

html动画评论表

1 个答案: