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

Question

鼠标移动到如图右边的文字上，文本出现编辑状态。

当鼠标移出，又恢复到文字状态。

我只知道 onmouseout 和 onmouseover ，可能是太菜了，感觉不好实现，请各位知道的大侠恳请指点下，给出实现的大概方法或者需要用到的函数等等....

拜谢了‵‵

Answer 1

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

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

* {margin:0;padding:0;}
.editArea {display:block;width:400px;}
.editArea p {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 p {height:100px;overflow:hidden;}
.editArea:hover p {height:auto;}
.editArea:hover textarea {border-color:#999;background:#fff;}

Answer 2

<style>
	.hide { display:none; }
	#tx { cursor:pointer; }
</style>
<p id="tx">blablabla</p>
<textarea id="ta" class="hide"></textarea>
<script>
	var tx = document.getElementById('tx'),
		ta = document.getElementById('ta'),
		toggleEL = function(el, fn){
			var cls = el.className,
				_cls = (cls == '') ? 'hide': ' hide';
			if (cls.indexOf('hide')===-1) {
				el.className += _cls;
			}else {
				el.className = cls.replace('hide', '');
			}
			if (fn) fn();
		};
	tx.onmouseover = function(){
		toggleEL(tx, function(){
			toggleEL(ta);
			ta.focus();
		});
	}

</script>

Answer 3

//修改 tx.onmouseover
tx.onmouseover = function(){
	toggleEL(tx, function(){
		toggleEL(ta);
		ta.value = tx.innerText;
		ta.focus();
	});
}
//js中增加
ta.onmouseout = function(){
	toggleEL(ta, function(){
	    toggleEL(tx);
	});
}