分享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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
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数组编码转换示例详解
2014/03/11 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
js获取input标签的输入值实现代码
2013/08/05 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
python读取二进制mnist实例详解
2017/05/31 Python
手把手教你python实现SVM算法
2017/12/27 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
如何在pycharm中安装第三方包
2020/10/27 Python
python实现xml转json文件的示例代码
2020/12/30 Python
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
数学教研活动总结
2014/07/02 职场文书
个人职业及收入证明
2014/10/13 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
干部理论学习心得体会
2016/01/21 职场文书
2016年母亲节广告语
2016/01/28 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL