JS文件：

复制代码 代码如下:

function mouseAction() {

var textInputs = document.getElementsByTagName("input");

var len = textInputs.length;

var index = 0;

var textInput;

/*

也能用 for in 语句遍历

for (textInput in textInputs){

textInputs[textInput].onmouseover = functionName;

}

*/

for( index = 0; index < len; index++ ) {

textInput = textInputs[index];

if( textInput.getAttribute("type") == "text" ){

textInput.onmouseover = function (){

//也能用这种方式 this.style.backgroundColor = "red";

this.className = "txtMouseOver"; //要先在HTML中引入CSS文件

}; //注意要加分号

textInput.onmouseout = function(){

this.className = "txtMouseOut";

};

textInput.onfocus = function(){

this.className = "txtMouseFocus";

};

textInput.onblur = function(){

this.className = "txtMouseBlur";

};

}

}

}

//也可以直接跟一个函数名，不要加引号，括号 window.onload = mouseAction;

window.onload = function(){

mouseAction();

};

CSS文件：

复制代码 代码如下:

/*主体居中显示*/

body{

width: 80%;

height: 800px;

position: relative;

margin-left: 10%;

/*left: -40%;*/

border: #00CCFF solid thin;

}

.txtMouseOver

{

border-color: #9ecc00;

}

.txtMouseOut

{

border-color: #84a1bd;

}

.txtMouseFocus

{

border-color: #9ecc00;

background-color: #e8f9ff;

}

.txtMouseBlur

{

border-color: #84a1bd;

background-color: #ffffff;

}