JS实现用户登录form input框鼠标移入移出效果

最新推荐文章于 2020-11-29 01:57:22 发布

dibengcheng6179

最新推荐文章于 2020-11-29 01:57:22 发布

阅读量576

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/super-zhen/p/3757130.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background:url(images/bg.png) repeat-x;}
#Login{width:340px;height:400px;margin:100px auto;}
#Login form input{border:1px solid #598fab;background:#235376; padding-left:15px;color:#BDC8D3; margin-bottom:15px;height:44px;width:330px;line-height:44px;border-radius:23px;}
#Login form .change{background:#11466b;}
#Login form .sub{border:none;position:absolute;right:-7px;top:1px;width:44px;height:44px;border-radius:22px;background:url(images/but1.png);}
#Login form .sub:hover{background:url(images/but2.png);}
#Login form p{position:relative;}
</style>
</head>

<body>
<div id="Login">
    <form>
        <input type="text" value="账号" name="id" />
        <p><input type="text" value="密码"  name="psw"/>
        <input type="submit" value="" class="sub" />
        </p>
    </form>
</div>    
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    $("#Login form input").focus(function(){
            $(this).addClass("change");            
            if($(this).val()==this.defaultValue)
            {$(this).val("")}
        
        })
    $("#Login form input").blur(function(){
            $(this).removeClass("change");            
            if($(this).val()=="")
            {$(this).val(this.defaultValue)}
        
        })
</script>
</body>
</html>

初始

鼠标移入

有输入内容移出

无输入内容移出

images文件夹下的三个图片：bg.png but1.png but2.png

转载于:https://www.cnblogs.com/super-zhen/p/3757130.html

dibengcheng6179

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现用户登录form input框鼠标移入移出效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>...
复制链接

扫一扫