为什么这么写没有动画效果

来源：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回答