Надеюсь, я понял ваши ожидаемые эффекты. Этот метод переключает предопределенные Css классы на основе события фокуса. Поскольку вы не объяснили часть Onfocusout, я просто переключаю элемент inputbox 'class на основе статуса фокуса пароля'.
Пожалуйста, обратите внимание: Css classes .focused и .inpBox добавлены здесь следуя логике скрипта c.
$(document).ready(function() {
var fg=$(".form-group");
var pwd=$(".form-group #pwd");
pwd.on('focus',function(){
$(this).toggleClass('focused');
console.log('focused');
});
$(".inputbox").toggleClass('inpBox',(pwd.not(':focus')));
});
.form-control{
margin-top:15px;
margin-bottom:5px;
}
.box {
position: relative;
}
.inputsize {
position: relative;
width: calc( 100% - 25px);
left: 25px;
background-color: transparent;
z-index:1;
}
.inputglyph {
position: absolute;
left: 6px;
top: 10px;
color: darkred;
}
.inputbox {
position: relative;
width: calc(100% - 2px);
height: 100%;
/* background-color:yellow;*/
}
.warning {
color: red;
}
.ok {
color: green;
}
.inputstatus {
position: static;
background: white;
}
.feedback {
float: right;
right: 4px;
}
.star {
float: left;
left: 6px;
color: green;
}
.error {
position: relative;
left: 12px;
}
.float {
position: absolute;
bottom: 2px;
left: 42px;
color: gray;
}
.up {
color: "green";
bottom: "38px";
left: "32px";
}
.email_placehold {
position: absolute;
top: 8px;
left: 94px;
color: cyan;
z-index:0;
}
.pw_placehold {
position: absolute;
top: 8px;
left: 118px;
color: cyan;
z-index:0;
}
.focused:not( :hover ){
background-color:pink;
}
.focused:hover{
background-color:green;
}
.inpBox:not( :hover ){
background-color:white;
}
.inpBox:hover{
background-color:lightblue;
}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<body>
<p>Click this paragraph.</p>
<h2>Vertical (basic) form</h2>
<form>
<div class="form-group">
<div id="box1" class="box">
<div class="inputbox" id="inpemail" >
<span class="glyphicon glyphicon-envelope inputglyph"></span>
<input
type="email"
class="form-control inputsize check"
id="email"
placeholder=""
name="E-mail"
/>
</div>
<label id="flemail" class="float" for="email">E-mail:</label>
<span id="plemail" class="email_placehold">Like John.Doe@email.com</span>
</div>
<!--<span class="error">email</span>-->
<!--<span class="error">name</span>-->
<div id="inputstat1" class="inputstatus">
<span id="" class="glyphicon glyphicon-star star"></span>
<span id="erroremail" class="error">Your email</span>
<span id="errorfeedbk1" class="feedback"></span>
</div>
</div>
<div class="form-group">
<div id="box2" class="box">
<div class="inputbox" id="inppwd">
<span class="glyphicon glyphicon-lock inputglyph"></span>
<input
type="password"
class="form-control inputsize check"
id="pwd"
placeholder=""
name="Password"
/>
</div>
<label id="flpwd" class="float" for="pwd">Password:</label>
<span id="plpwd" class="pw_placehold">Like Password123</span>
</div>
<!--<span class="error">password</span>-->
<div id="inputstat2" class="inputstatus">
<span class="glyphicon glyphicon-star star"></span>
<span id="errorpw" class="error">Your password</span>
<span id="errorfeedbk2" class="feedback"></span>
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember" /> Remember me</label>
</div>
<button type="submit" class="btn btn-default btn1">Submit</button>
</form>
</body>