分享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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
JS request函数 用来获取url参数
May 17 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
vue.js学习之递归组件
Dec 13 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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
浅析PHP水印技术
2007/02/14 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python yield使用方法示例
2013/12/04 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
python实现词法分析器
2019/01/31 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
军神教学反思
2014/02/04 职场文书
行政助理的岗位职责
2014/02/18 职场文书
《花木兰》教学反思
2014/04/09 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
毕业生自荐信范文
2015/03/05 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android