事件响应，移除和增加样式。

JavaScript的写法：

function addClass(dom,className){
        if(dom){
            var classname=dom.className;
            var reg=new RegExp(className,'g');
            classname=classname.replace(reg,'').replace(/\s+$/,'');
            dom.className=classname+' '+className;
        }
    }
    function removeClass(dom,className){
        if(dom){
            var reg=new RegExp(className,'g');
            dom.className=dom.className.replace(reg,'');
        }
    }
    username.onclick=function(){
        addClass(username,"inputFocusClass");
        removeClass(username,"inputHoverClass");
    };
    username.onfocus=function(){
        addClass(username,"inputFocusClass");
        removeClass(username,"inputHoverClass");
    };
    username.onmouseover=function(){
        removeClass(username,"inputFocusClass");
        addClass(username,"inputHoverClass");
    };
    username.onblur=function(){
        removeClass(username,"inputFocusClass");
        removeClass(username,"inputHoverClass");
    };
    username.onmouseleave=function(){
        removeClass(username,"inputFocusClass");
        removeClass(username,"inputHoverClass");
    };

JQuery的写法

 $("input").click(function(){
          $(this).addClass("inputFocusClass");
          $(this).removeClass("inputHoverClass");
      });
      $("input").focus(function(){
          $(this).addClass("inputFocusClass");
          $(this).removeClass("inputHoverClass");
      });
      $("input").mouseover(function(){
          $(this).removeClass("inputFocusClass");
          $(this).addClass("inputHoverClass");
      });
      $("input").blur(function(){
          $(this).removeClass("inputFocusClass");
          $(this).removeClass("inputHoverClass");
      });
      $("input").mouseleave(function(){
          $(this).removeClass("inputFocusClass");
          $(this).removeClass("inputHoverClass");
      });