分享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实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP实现图片简单上传
2006/10/09 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
php 变量定义方法
2009/06/14 PHP
linux中cd命令使用详解
2015/01/08 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
vue组件生命周期详解
2017/11/07 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
Python字典遍历操作实例小结
2019/03/05 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python 线程池用法简单示例
2019/10/02 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Python @property及getter setter原理详解
2020/03/31 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
食品营养与检测应届生求职信
2013/11/08 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
新年祝酒词大全
2015/08/11 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers