分享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 相关文章推荐
使用javascript为网页增加夜间模式
Jan 26 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
简单的jQuery入门指引
Jul 28 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
python中引用与复制用法实例分析
2015/06/04 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
用pycharm开发django项目示例代码
2019/06/13 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
生产副总岗位职责
2013/11/28 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
生物制药自我鉴定
2014/01/25 职场文书
网络信息安全承诺书
2014/03/26 职场文书
求职简历自荐信
2014/06/18 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
小学毕业感言200字
2015/07/30 职场文书
教学副校长工作总结
2015/08/13 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书