鼠标经过的文本框textbox变色

246 阅读 0 评论 163 点赞

我是靠谱客的博主正直嚓茶，最近开发中收集的这篇文章主要介绍鼠标经过的文本框textbox变色，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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; 
}