鼠标经过的文本框textbox变色


Posted in Javascript onMay 21, 2009

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; 
}
Javascript 相关文章推荐
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
JavaScript实现音乐导航效果
Nov 19 Javascript
jQuery 性能优化指南(3)
May 21 #Javascript
jQuery 性能优化指南(2)
May 21 #Javascript
jQuery 性能优化指南 (1)
May 21 #Javascript
javascript操作cookie_获取与修改代码
May 21 #Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 #Javascript
Javascript 的addEventListener()及attachEvent()区别分析
May 21 #Javascript
W3C Group的JavaScript1.8 新特性介绍
May 19 #Javascript
You might like
PHP高级OOP技术演示
2009/08/27 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
python操作xml文件详细介绍
2014/06/09 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
python实现图像拼接功能
2020/03/23 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
ECHT官方网站:男女健身服
2020/02/14 全球购物
求职简历中个人的自我评价
2013/12/01 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
解读Vue组件注册方式
2021/05/15 Vue.js
js不常见操作运算符总结
2021/11/20 Javascript
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫