旗下平台: 媒体+ 驱动号 阿里汽车 非常在线 众创网

Dreamweaver技术教程:如何使鼠标经过input时颜色发生变化

  • 来源: 互联网 2016-04-12/16:53 访问量:
  • 代码: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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{
    font-size:63%;
    color:#000;
    }
    /*input*/
    .input_on{
    padding:2px 8px 0pt 3px;
    height:18px;
    border:1px solid #999;
    background-color:#FFFFCC;
    }
    .input_off{
    padding:2px 8px 0pt 3px;
    height:18px;
    border:1px solid #CCC;
    background-color:#FFF;
    }
    .input_move{
    padding:2px 8px 0pt 3px;
    height:18px;
    border:1px solid #999;
    background-color:#FFFFCC;
    }
    .input_out{
    /*height:16px;默认高度*/
    padding:2px 8px 0pt 3px;
    height:18px;
    border:1px solid #CCC;
    background-color:#FFF;
    }
    /*form*/
    ul.input_test{
    margin:20px auto 0 auto;
    width:500px;
    list-style-type:none;
    }
    ul.input_test li{
    width:500px;
    height:22px;
    margin-bottom:10px;
    }
    .input_test label{
    float:left;
    padding-right:10px;
    width:100px;
    line-height:22px;
    text-align:right;
    font-size:1.4em;
    }
    .input_test p{
    float:left;
    _margin-top:-1px;
    }
    .input_test span{
    float:left;
    padding-left:10px;
    line-height:22px;
    text-align:left;
    font-size:1.2em;
    color:#999;
    }
    </style>
    </head>
    <body>
    <ul class="input_test">
    <li>
    <label for="inp_name">姓名:</label>
    <p><input id="inp_name" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p>
    <span>请输入您的姓名</span>
    </li>
    <li>
    <label for="inp_email">Email:</label>
    <p><input id="inp_email" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p>
    <span>请输入您的Email</span>
    </li>
    <li>
    <label for="inp_web">网站:</label>
    <p><input id="inp_web" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p>
    <span>请输入您的网站</span>
    </li>
    </ul>
    </body>
    </html>

     


    赞(0)

    AD推荐