分享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-
