分享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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
Javascript玩转继承(一)
May 08 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
JScript实现地址选择功能
Aug 15 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 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
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
JavaScript 学习技巧
2010/02/17 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
介绍Python中的文档测试模块
2015/04/28 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Python3解释器知识点总结
2019/02/19 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python中if有多个条件处理方法
2020/02/26 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
比利时香水网上商店:NOTINO
2018/03/28 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
爱心助学感谢信
2015/01/21 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
自我检讨书怎么写
2015/05/07 职场文书
丧事酒宴答谢词
2015/09/30 职场文书