我有一个登录表单，每当有人单击输入时，我想通过添加轮廓来为其设置动画。使用jquery时，我尝试了不同的方法，我可以打开动画，但无法关闭它。我希望当有人点击其他地方时动画消失。我尝试过使用 * 选择器，但没有成功。以下是我的代码结构:
@import url('https://fonts.googleapis.com/css?family=Fira+Sans|Roboto+Condensed');
textarea:focus, input:focus{
outline: none;
}
body {
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkvMfKjaJCpaOFlBZwHp2EuQobP9J9Ejuvgyvls8UvxRsmk2vqWA') no-repeat center center fixed;
background-size: cover;
}
@media screen and (min-width: 550px) {
.login-cont {
width: 500px;
background-color: white;
border-radius: 5px;
}
.input-cont {
border: none;
width: 400px;
height: 70px;
text-align: center;
margin: 20px 35px;
background-color: gainsboro;
}
.log-input {
border: none;
text-align: left;
height: 70px;
width: 325px;
background-color: gainsboro;
margin-left: 15px;
font-size: 20px;
font-family: "Roboto Condensed";
font-weight: normal;
}
.inp-ali1 {
text-align: left;
float: left;
font-size: 20px;
margin: 22.5px 0;
height: 25px;
}
.inp-ali2 {
text-align: left;
float: left;
font-size: 21px;
margin: 23.5px 0;
height: 25px;
}
}
.col-centered {
float: none;
margin-left: 25px;
margin-right: 25px;
margin: 25px auto;
}
.log-title {
font-family: "Fira Sans";
}
.wb {
text-align: center;
font-size: 20px;
font-family: "Fira Sans";
}
.smt-btn {
border-radius: 10px;
}
a:link {
font-size: 15px;
}
.inp-act {
outline: deeppink solid 3px;
}
@media screen and (max-width: 549px) {
.login-cont {
background-color: white;
margin-left: 3%;
margin-right: 3%;
border-radius: 0.75%;
width: inherit;
}
}<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><head>
<div class="text-center">
<div class="login-cont col-centered text-center navbar-form">
<br>
<br>
<h1 class="log-title">LOGIN</h1>
<br>
<form action="/Home.html">
<div class="input-cont">
<span class="stay"><label><i class="fa fa-envelope-o inp-ali1" aria-hidden="true"></i><input type="email" class="log-input" placeholder="Email" required>
</label></span>
</div>
<div class="input-cont">
<span class="stay"><label><i class="fa fa-lock inp-ali2" aria-hidden="true"></i><input type="password" class="log-input" placeholder="Password" required></label></span>
</div>
<br>
<span><label for="remember"><input type="checkbox" name="rememberme" id="remember"></label></span>
<br>
<button class="smt-btn btn">Submit</button>
<br>
<br>
<a href="#">Forgot your password?</a> <br>
<a href="#">New? Register.</a>
<br>
</form>
</div>所以，我有一个 inp-act 类，要添加到登录输入的容器 div 中，这就是我想要使用的。我的最终目标是当点击输入时，轮廓就会显示，当点击输入时，轮廓就会消失。
最佳答案
您可以使用 jQuery focusin()和 focusout() .
焦点对准时，使用 closest() 将 inp-act 类添加到 .input-cont 中。当焦点被移除时，移除该类。
var input = $('.log-input');
input.each(function() {
$(this).focusin(function() {
$(this).closest('.input-cont').addClass('inp-act');
});
$(this).focusout(function() {
$(this).closest('.input-cont').removeClass('inp-act');
});
});@import url('https://fonts.googleapis.com/css?family=Fira+Sans|Roboto+Condensed');
textarea:focus,
input:focus {
outline: none;
}
body {
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkvMfKjaJCpaOFlBZwHp2EuQobP9J9Ejuvgyvls8UvxRsmk2vqWA') no-repeat center center fixed;
background-size: cover;
}
@media screen and (min-width: 550px) {
.login-cont {
width: 500px;
background-color: white;
border-radius: 5px;
}
.input-cont {
border: none;
width: 400px;
height: 70px;
text-align: center;
margin: 20px 35px;
background-color: gainsboro;
}
.log-input {
border: none;
text-align: left;
height: 70px;
width: 325px;
background-color: gainsboro;
margin-left: 15px;
font-size: 20px;
font-family: "Roboto Condensed";
font-weight: normal;
}
.inp-ali1 {
text-align: left;
float: left;
font-size: 20px;
margin: 22.5px 0;
height: 25px;
}
.inp-ali2 {
text-align: left;
float: left;
font-size: 21px;
margin: 23.5px 0;
height: 25px;
}
}
.col-centered {
float: none;
margin-left: 25px;
margin-right: 25px;
margin: 25px auto;
}
.log-title {
font-family: "Fira Sans";
}
.wb {
text-align: center;
font-size: 20px;
font-family: "Fira Sans";
}
.smt-btn {
border-radius: 10px;
}
a:link {
font-size: 15px;
}
.log-input {
transition: .3s ease-in-out;
}
.inp-act {
outline: 3px solid purple;
}
@media screen and (max-width: 549px) {
.login-cont {
background-color: white;
margin-left: 3%;
margin-right: 3%;
border-radius: 0.75%;
width: inherit;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<head>
<div class="text-center">
<div class="login-cont col-centered text-center navbar-form">
<br>
<br>
<h1 class="log-title">LOGIN</h1>
<br>
<form action="/Home.html">
<div class="input-cont">
<span class="stay"><label><i class="fa fa-envelope-o inp-ali1" aria-hidden="true"></i><input type="email" class="log-input" placeholder="Email" required>
</label></span>
</div>
<div class="input-cont">
<span class="stay"><label><i class="fa fa-lock inp-ali2" aria-hidden="true"></i><input type="password" class="log-input" placeholder="Password" required></label></span>
</div>
<br>
<span><label for="remember"><input type="checkbox" name="rememberme" id="remember"></label></span>
<br>
<button class="smt-btn btn">Submit</button>
<br>
<br>
<a href="#">Forgot your password?</a> <br>
<a href="#">New? Register.</a>
<br>
</form>
</div>关于javascript - JQuery 动画表单大纲，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48432493/