鼠标经过的文本框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 相关文章推荐
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
Vue3为什么这么快
Sep 23 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
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
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
js option删除代码集合
2008/11/12 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
python集合类型用法分析
2015/04/08 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
会计自我鉴定
2014/02/04 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
党支部书记岗位职责
2015/02/15 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android