By烟花易冷

貌似真的有不少主题原本就酱紫做的，文章页面默认没有出现评论框，或者一次一部分信息，当用户把文字输入焦点点击到输入框(textarea)时，才弹出其他需要填写的内容之类的，毫无疑问，JS可以轻轻松松实现这种效果，但是亲们可都知道，伴随着JS的增多，网站的加载速度可会越来越慢的，因此，本文应运而生~同时，正有群里一朋友向我问道这类问题，我就直接..直接看是表演啦~

1、首先，你得拥有一个支持HTML5+CSS3的浏览器，（PS:真心不想解释，因为这里用的是CSS3的同级元素选择器，至于其详细资料以及其他选择器用法，请参考上一篇文章）

2、布局好基本的元素局面，也就是先用HTML写好表单，添加必须的的CSS。

3、没有3了，开工吧~

这是布局好的几个表单元素，分别是一个textarea，3个input，其中我用了一个HTML5里面的section元素将3个input包裹起来（其实也可以用DIV然后修改，看个人喜好），下面是我的具体做法：

方案一（很简单，但是效果不太好）：

• I、将section标签的display值设置为隐藏（hidden）。
• II、当输入焦点（focus）位于textarea时，使用CSS3中新增加的 ~ 选择器选择section标签，将其display值设置为block。
• III、当鼠标移至section元素时（即hover），设定继续其display值设置为block。
• IV、就这样，方案一简单吧，但是效果不太好看，下面的方案二来一个好看一点的~

方案二（推荐）

• I、将section标签的可见度设置为0
• II、与方案一类似，当以上两种情况存在是，设置可见度为1
• III、重点来了: 使用过渡态（transition）延缓载入，你会看到不一样的效果~

—-END—–

好的了就这样，暂时先说到这里，演示文件我已上传网盘， 需要的话….等评论满10条我再开放下载吧~