就是不掉下来,而且变颜色,输入东西的时候还在,也就是鼠标移开不掉下来
1条回答 默认 最新
关注 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .form-item { position: relative; margin-top: 40px; } .form-item label, .form-item input { position: absolute; height: 32px; line-height: 32px; top: 0; left: 10px; } .form-item label { color: #ccc; transition: all .4s; z-index: 1; } .form-item input { border: none; outline: none; border-bottom: 1px solid #ccc; background: transparent; z-index: 2; } #olabel{ opacity: 0; } .form-item input:focus { border-color: red; } .form-item input:hover + #olabel { opacity: 1 !important; color: red; top: -32px; } .form-item input:focus + #olabel { opacity: 1 !important; color: red; top: -32px; } </style> </head> <body> <div class="form-item"> <input type="text" id="oinput" value=""/> <label for="" id="olabel">请输入账号</label> </div> <script> var input = document.getElementById('oinput') var label = document.getElementById('olabel') if(input.value !== ''){ label.style.opacity = 0 }else{ label.style.opacity = 1 } input.onfocus = function(){ if(input.value !== ''){ label.style.opacity = 0 }else{ label.style.opacity = 1 } } input.onblur = function(){ if(input.value !== ''){ label.style.opacity = 0 }else{ label.style.opacity = 1 } } </script> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 数学建模招标中位数问题
- ¥15 phython路径名过长报错 不知道什么问题
- ¥15 深度学习中模型转换该怎么实现
- ¥15 HLs设计手写数字识别程序编译通不过
- ¥15 Stata外部命令安装问题求帮助!
- ¥15 从键盘随机输入A-H中的一串字符串,用七段数码管方法进行绘制。提交代码及运行截图。
- ¥15 TYPCE母转母,插入认方向
- ¥15 如何用python向钉钉机器人发送可以放大的图片?
- ¥15 matlab(相关搜索:紧聚焦)
- ¥15 基于51单片机的厨房煤气泄露检测报警系统设计