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

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