分享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的内存泄漏
Mar 04 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
js 三级关联菜单效果实例
Aug 13 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
JS前端基于canvas给图片添加水印
Nov 11 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学习笔记 数组的常用函数
2011/06/13 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
Js四则运算函数代码
2012/07/21 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
python str与repr的区别
2013/03/23 Python
跟老齐学Python之复习if语句
2014/10/02 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python新手学习raise用法
2020/06/03 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
春节联欢会策划方案
2014/05/16 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers