我怎么让鼠标放到大的div中时边框变颜色的同时，图标也改变呢？

<!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;} .ptes{width:115px;height:30px;} .tbox1{width:150px;height:30px;border:1px solid red; margin:10px 10px;} .pb{width:30px;height:30px;background-color:#eee;vertical-align:middle;background: url(re_code2.png) no-repeat #EEE 8px 8px;background-size: 15px;} .pb1{width:30px;height:30px;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'"> <div class="pb" style="float: left;" onmouseout="this.className='pb'" onmousemove="this.className='pb1'"> </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>