鼠标放在输入框上,输入框和图片同时更换样式。

原创
2016-09-02 08:42:56 783浏览
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>
title> new document title>
meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
link rel="stylesheet" type="text/css" href="" />
style type="text/css">
.box{width:1000px;margin:0 auto;height:500px;border:1px solid green;}
.tbox{width:150px;height:30px;border:1px solid #585858; margin:10px 10px;background-color:#eee;vertical-align:middle;background: url(re_code2.png) no-repeat #EEE 8px 8px;background-size: 15px;}
.ptes{width:115px;height:30px;}
.tbox1{width:150px;height:30px;border:1px solid red; margin:10px 10px;}
.pb1:hover {background-color:#eee;vertical-align:middle;background: url(re_code1.png) no-repeat #EEE 8px 8px;background-size: 15px;}
style>
script type="text/javascript">script>
head>

body style="background-color:#FFF;">
div class="box">
    div class="tbox" onmouseout="this.className='tbox'" onmousemove="this.className='tbox1 pb1'">
            div style="float: left; width:30px; height:30px;">
            div>
            div class="ptes" style="float: left;">
                    input id="password" name="password" type="password" placeholder=" 请输入密码" value="" style="width:100%;height:26px;border-style:none"/>
            div>
    div>
div>
body>
html>

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。