分享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文件的代码
Jul 18 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
js实现无缝滚动图
Feb 22 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 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
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
Laravel 5 学习笔记
2015/03/06 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP之预定义接口详解
2015/07/29 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
jquery选择器简述
2015/08/31 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
python使用requests.session模拟登录
2019/08/09 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Python类及获取对象属性方法解析
2020/06/15 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
父亲婚礼答谢词
2015/01/04 职场文书