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");
});
