我有一个登录表单，每当有人点击输入时，我想通过添加一个大纲来设置它的动画。当使用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中，这就是我想要使用的内容。我的最终目标是，当单击输入时，轮廓将显示，当一个单击时，它将消失。
答案 0 :(得分：0)
您可以使用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>
答案 1 :(得分：0)
在没有测试的情况下写出我的想法，我通常会使用某种类切换来删除所有非活动项的类，并附加“活跃的＆＃39;聚焦元素的类。在这种情况下，它可能看起来像这样：
$('.input-cont').on('click', function() {
$('.input-cont').removeClass('input-active');
$(this).addClass('input-active');
});
.input-active将拥有您现在可以设置动画的所有焦点输入样式。
希望这有帮助。
答案 2 :(得分：0)
如果我正确阅读此内容，可以使用简单的CSS :focus
textarea,input{
outline:none;
}
textarea:focus,input:focus{
outline: #000000 dotted thick;
}
或者，如果您希望它实际上是动画，您可以在transition上使用border-width或类似的东西，有点像这样：
textarea,input{
border: 0px solid red;
transition: border-width 0.25s linear;
}
textarea:focus,input:focus{
border-width: 5px;
}
注意：我没有测试任何一个。