分享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 相关文章推荐
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
详解Nuxt.js 实战集锦
Nov 19 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
图解上海144收音机
2021/03/02 无线电
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
destoon官方标签大全
2014/06/20 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
小程序转发探索示例
2019/02/19 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
pandas将numpy数组写入到csv的实例
2018/07/04 Python
详解python的四种内置数据结构
2019/03/19 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
在Python中实现字典反转案例
2020/12/05 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
调查研究项目计划书
2014/04/29 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
前台岗位职责范本
2015/04/16 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书