分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
作者:yangzailu 发布时间:2024-05-22 10:41:02
标签:js,输入框,样式
废话不多说了,直接给大家贴关键代码了,具体代码如下所示:
<!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代码实现鼠标放在输入框上输入框和图片同时更换样式网站的支持!
来源:http://www.cnblogs.com/yangzailu/archive/2016/09/01/5830215.html
0
投稿
猜你喜欢
- 前面写过一篇关于python多线程的实现的文章, 但是效果不是最佳的,写法也不是很好。通过网上学习,也了解到了semaphore这个东西。百
- 1 安装nginx下载windows上的nginx最新版本,http://www.nginx.org/en/download.html。解压
- 条形图是一种常用的图形,比如在各种PPT的展示中为各种职业人士所喜爱。条形图能够直观地展示各种场景下数值的比较。Matplotlib提供了b
- 初学OpenCV图像处理的小伙伴肯定对什么高斯函数、滤波处理、阈值二值化等特性非常头疼,这里给各位分享一个小项目,可通过摄像头实时动态查看各
- 第一款在线格式化工具:Instant SQL Formatter功能强劲,可以设置第二款,和第一款类似,功能也一样,只不过是不同的UI而已,
- 最近一直在研究python+selenium+beautifulsoup的爬虫,但是存入数据库还有写入txt文件里面的时候一直都是unico
- 1、实例方法/对象方法实例方法或者叫对象方法,指的是我们在类中定义的普通方法。只有实例化对象之后才可以使用的方法,该方法的第一个形参接收的一
- 1. 需求概述最近接到一份PDF资料需要打印,奈何页面是如图所示的A3格式的,奈何目前条件只支持打印A4。我想要把每页的一个大页面裁成两个小
- 基于spring boot开发的微服务应用,与MyBatis如何集成?集成方法可行的方法有:1.基于XML或者Java Config,构建必
- 在日常开发中,我们进行用户登录的时候,大部分情况下都会使用 session 来保存用户登录信息,并以此为依据判断用户是否已登录。但其实 HT
- 这几天一直困惑我的问题,我觉得pycharm应该也是有的啊,偶然间找到了这个。把那个框里的选中,就可以了。ps:我的是 PyCharm 20
- 前言编写条件分支代码是编码过程中不可或缺的一部分。如果用道路来做比喻,现实世界中的代码从来都不是一条笔直的高速公路,而更像是由无数个岔路口组
- dict是python中的常用数据结构,应该尽量掌握其使用方法字典是另一种可变容器模型,且可存储任意类型对象。字典的每个键值 key=>
- MySQL replace函数我们经常用到,下面就为您详细介绍MySQL replace函数的用法,希望对您学习MySQL replace函
- 上传图片: if (!empty($_FILES["img"]["name"])) { //提取文件
- 如何在一台服务器上安装两个或者更多个的mysql呢?下面是详细的操作步骤,一起来学习学习吧。一、环境mysql软件包:  
- 由于笔者最近在做一个跨数据库操作的测试,开始做IBatisNet (IBatis.DataMapper.1.6.2/IBatis.DataA
- 1.为什么要使用域名访问部署在Istio中的程序我们在Istio中部署的程序一定不止有一个,前面我们已经在Istio中部署了Httpbin、
- 前言本篇主要给大家讲述了如何利用Go语言的语法特性实现Set类型的数据结构,分享出来供大家参考学习,话不多说了,来一起看看详细的介绍吧。需求
- current_date()只显示的是当前时间的日期例如:select current_date() from a ;结果:2021-08-