利用CSS实现两种不同的表单状态

有时候，我们在使用onmouseout和onmouseover时会遇到实现不了的情况。

下面就来着重介绍一下编辑状态与文字状态之间互换的实现方法：

<style>
        .hide { display:none; }
        #tx { cursor:pointer; }
</style>
<div id="tx">blablabla</div>
<textarea id="ta"></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>

Xushine

484