首页 > 开发 > JS > 正文

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

2017-09-05 13:02:49  来源:网友分享

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

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

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

拜谢了‵‵

解决方案

其实完全用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;}