求一个鼠标经过与集焦文本框的效果?

看到网上好多的效果是当鼠标移动到文本框时文本框边框与背景都变色,是当前焦点时又是一个颜色,以前用JQUERY来写了一个,不过感觉有一点杀鸡用牛刀的那种感觉,想用纯JS来实现,但是不知道如何来写,自己写的总是出现一些小问题,以下是我的代码:<!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></title>
    <style type="text/css">
       /*默认颜色*/
     .input{border:1px solid silver;padding:2px;padding-left:3px ;}
     /* 鼠标移上去颜色*/
    .hover{border:1px solid Yellow;}
    /*单击颜色*/
    .click{border:2px solid #68ACFF}
    </style></head>
<body>
<div class="test" >
<input   class="input" onmouseover="this.className='input hover'" onmousedown="this.className='input click'" onfocus="this.className='input click'" onclick="this.select()"  onmouseout="this.className='input';"  id="box" value="aaa" type="text" />
<input   class="input" onmouseover="this.className='input hover'" onmousedown="this.className='input click'" onfocus="this.className='input click'" onclick="this.select()"  onmouseout="this.className='input';"  id="box" value="aaa" type="text" />
</div>
</body>
</html>
基本能实现效果,但是会出现当文本是当前焦点的时候,如果鼠标移出的话,那么焦点的那种颜色又变了,需要阻止onmouseout的事件发生,但是我不会,请高手在这里指点一下或给一个这样的效果最好了,呵呵,先谢谢大家了

解决方案 »

  1.   

    onmouseover 鼠标经过时
    onfocus 文本框获得焦点,改变背景色
    onblur  文本框失去焦点,还原状态
      

  2.   


    <!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></title>
        <style type="text/css">
           /*默认颜色*/
         .input{border:1px solid silver;padding:2px;padding-left:3px ;}
         /* 鼠标移上去颜色*/
        .hover{border:1px solid Yellow;}
        /*单击颜色*/
        .click{border:2px solid #68ACFF}
        </style></head>
    <body>
    <div class="test" >
    <input   class="input"   onmouseover="this.className='input hover'"  onfocus="this.className='input click'" onclick="this.select()"  onblur="this.className='input click';"  id="box" value="aaa" type="text" />
    </div>
    </body>
    </html>