分享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 26 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
关于vue的列表图片选中打钩操作
Sep 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
一次编写,随处运行
2006/10/09 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
php变量范围介绍
2012/10/15 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
javascript父、子页面交互技巧总结
2014/08/08 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
Django 拆分model和view的实现方法
2019/08/16 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
电子商务专业学生的学习自我评价
2013/10/27 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
车间机修工岗位职责
2014/02/28 职场文书
安全协议书
2014/04/23 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
中学生学习保证书
2015/02/26 职场文书
大学生受助感言
2015/08/01 职场文书