分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式


Posted in Javascript onSeptember 01, 2016

废话不多说了,直接给大家贴关键代码了,具体代码如下所示:

<!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> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
.box{width:1000px;margin:0 auto;height:500px;border:1px solid green;}
.tbox{width:150px;height:30px;border:1px solid #585858; margin:10px 10px;background-color:#eee;vertical-align:middle;background: url(re_code2.png) no-repeat #EEE 8px 8px;background-size: 15px;}
.ptes{width:115px;height:30px;}
.tbox1{width:150px;height:30px;border:1px solid red; margin:10px 10px;}
.pb1:hover {background-color:#eee;vertical-align:middle;background: url(re_code1.png) no-repeat #EEE 8px 8px;background-size: 15px;}
</style>
<script type="text/javascript"></script>
</head>
<body style="background-color:#FFF;">
<div class="box">
<div class="tbox" onmouseout="this.className='tbox'" onmousemove="this.className='tbox1 pb1'">
<div style="float: left; width:30px; height:30px;">
</div>
<div class="ptes" style="float: left;">
<input id="password" name="password" type="password" placeholder=" 请输入密码" value="" style="width:100%;height:26px;border-style:none"/>
</div>
</div>
<div>
</body>
</html>

以上所述是小编给大家介绍的分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
vue.js入门教程之基础语法小结
Sep 01 #Javascript
AngularJs directive详解及示例代码
Sep 01 #Javascript
AngularJs concepts详解及示例代码
Sep 01 #Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 #Javascript
AngularJs html compiler详解及示例代码
Sep 01 #Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 #Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 #Javascript
You might like
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
深入剖析Node.js cluster模块
2018/05/23 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
python实现根据月份和日期得到星座的方法
2015/03/27 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
对python的输出和输出格式详解
2018/12/08 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
python实现可逆简单的加密算法
2019/03/22 Python
tensorflow之并行读入数据详解
2020/02/05 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
应聘护士自荐信
2013/10/21 职场文书
将相和教学反思
2014/02/04 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers
MYSQL常用函数介绍
2022/05/05 MySQL