为什么这么写没有动画效果
来源：4-10 编程练习
Meskjei
2018-09-16 15:25:04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*鼠标移上去或者获得焦点、在此处填写代码*/
.container{
position: relative;
width: 400px;
margin: 0 auto;
}
.telInput:hover, .telInput:focus{
text-indent: 2px;
}
.telInput{
text-indent: 3em;
width: 150px;
transition: all 0.3s;
}
span{
position: absolute;
left: 4px;
top: 1px;
transition: all 0.3s;
}
.telInput:hover+span, .telInput:focus+span{
left: -25px;
}
/*符合验证的label、在此处填写代码*/
/*不符合验证的label、在此处填写代码*/
</style>
</head>
<body>
<div class='container'>
<span>邮箱</span>
<input type='email' placeholder='请在此处输入邮箱' class='telInput'/>
</div>
</body>
</html>写回答
1回答
-
好帮手慕星星
2018-09-17
在css中用的是兄弟元素来对span标签添加动画，但是在html中span标签却在input标签前面哦，这样是不对的，应该把span标签放在input标签后面，参考：
还有你的label标签没有写哦，自己完善下，祝学习愉快~~
0
相似问题