CSS 能不能实现两种不同的表单状态？

其实完全用css也可以做
看demo http://jsbin.com/ukivur/edit#preview

<a class="editArea">
    <h2>BOTTOM RIGHT SQUARE CORNER</h2>
    <div>
        <textArea>我只知道 onmouseout 和 onmouseover ，可能是太菜了，感觉不好实现，请各位知道的大侠恳请指点下，给出实现的大概方法或者需要用到的函数等等....</textArea>
    </div>
</a>

* {margin:0;padding:0;}
.editArea {display:block;width:400px;}
.editArea div {background:#eee;padding:5px 5px 5px 5px;}
.editArea h2 {height:30px;line-height:30px;font-size:12px;color:#ddd;background:#7f7f9c;text-align:center;-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;}
.editArea textarea {height:200px;width:378px;overflow:visible;border:1px solid #eee;font-size:12px;padding:5px;background:#eee;}
.editArea div {height:100px;overflow:hidden;}
.editArea:hover div {height:auto;}
.editArea:hover textarea {border-color:#999;background:#fff;}