我正在尝试制作一个输入框,它看起来像是有一个占位符,上面写着用户名,但当框被选中时,它会移动并变为更深的颜色,以类似于标签。我遇到的问题是,每当我将鼠标悬停在框上时,它都会完成动画,但随后会立即撤消,将文本放回占位符的样子。我还想制作我的Javascript/JQuery代码,这样,如果框中有任何键入内容,文本将保留为标签,即使没有被选中,也不会返回占位符。我的另一个问题是,我不知道JQuery命令来判断是否选择了输入框。我在下面提供了我的所有代码,以及一个链接到CodePen,它有
<div id='inputdiv'>
<input id='textinp'>
</div>
<h4>Username</h4>
#textinp {
border: none;
width: 200px;
height: 30px;
font-size: 20px;
margin-left: 5px;
font-family: 'Roboto', sans-serif;
background: rgba(0, 0, 0, 0);
}
input:focus {
outline: 0;
}
#inputdiv {
width: 200px;
height: 32px;
margin: 0 auto;
margin-top: 70px;
border-top: 1px solid black;
border-right: none;
border-left: 1px solid black;
border-bottom: none;
z-index: -2;
}
h4 {
font-family: 'Roboto', sans-serif;
font-size: 20px;
position: relative;
bottom: 53px;
left: 575px;
color: #C2C2C2;
z-index: -1;
}
$(document).ready(function() {
$("#inputdiv").mouseenter(function() {
$("h4").animate({
left: '470px',
color: '#00000'
});
if ($('#textinp').val() == '') {
$("h4").animate({
left: '580px',
color: '#C2C2C2'
});
}
});
});
CodePen
请尝试使用hover()
方法。作为第一个参数,定义在hoverIn(鼠标进入时)上执行的函数,作为第二个参数,在hoverOut(鼠标离开时)上要执行的函数。
以下是您更新的示例:http://codepen.io/anon/pen/LprybQ