分享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使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
前端把html表格生成为excel表格的实例
Sep 19 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 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
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
Python 正则表达式实现计算器功能
2017/04/29 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
移动通信专业自荐信范文
2013/11/12 职场文书
开业庆典邀请函
2014/01/08 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
河童之夏观后感
2015/06/11 职场文书
放假通知怎么写
2015/08/18 职场文书
运动会广播稿20字
2015/08/19 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
公证书
2019/04/17 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL