HTML代碼

<div class="login">
      <div class="box">
        <div id="user-a" class="input-tx">
          <div id="user-b" class="logo">
            <i class="fa fa-user fa-2x" aria-hidden="true"></i>
          </div>
          <input id="user" type="text"/>
        </div>
        <div id="password-a" class="input-tx">
          <div id="password-b" class="logo">
            <i class="fa fa-lock fa-2x" aria-hidden="true"></i>
          </div>
          <input id="password" type="password"/>
        </div>
        <div class="bt">
          <div class="reset">重置</div>
          <div class="login_bt">登 錄</div>
        </div>
      </div>
</div>

利用jQ方法判斷Dom對象獲得跟失去焦點進行CSS樣式變換

blur事件

$("#user").blur(function(){//失去焦點    
    $("#user-a").removeClass("input-active");    
    $("#user-b").removeClass("logo-active");
});
$("#password").blur(function(){    
   $("#password-a").removeClass("input-active");    
   $("#password-b").removeClass("logo-active");
});

focus事件

$("#user").focus(function(){//獲得焦點    
    $("#user-a").addClass("input-active");    
    $("#user-b").addClass("logo-active");
});
$("#password").focus(function(){    
    $("#password-a").addClass("input-active");    
    $("#password-b").addClass("logo-active");
});