脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 输入框样式

分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式

 更新时间：2016年09月01日 16:22:26   作者：yangzailu  
在一些网站我们会见到，当鼠标放在输入框上输入框和图片同时更换样式，那么基于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代码实现鼠标放在输入框上输入框和图片同时更换样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • JavaScript编码风格指南(中文版)

    JavaScript编码风格指南(中文版)

    写作本文旨在加深自己印象，也为了更多人的了解到JS编码风格，提高自己的编码质量。想了解更多的内容请阅读《编写可维护的JavaScript》
    2016-08-08
  • JS实现简单打砖块弹球小游戏

    JS实现简单打砖块弹球小游戏

    这篇文章主要为大家详细介绍了JS实现简单打砖块弹球小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • javascript判断firebug是否开启的方法

    javascript判断firebug是否开启的方法

    这篇文章主要介绍了javascript判断firebug是否开启的方法,结合实例形式分析了javascript基于console控制台方法判断firebug开启状态的相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • JS根据变量保存方法名并执行方法示例

    JS根据变量保存方法名并执行方法示例

    用eval方法，把传进来的这个方法名所代表的方法当作一个对象来赋值给method1的func属性,需要的朋友可以参考下
    2014-04-04
  • Math.js解决js中小数精度丢失问题

    Math.js解决js中小数精度丢失问题

    在JavaScript中进行小数运算时,会容易出现精度丢失的问题,例如在进行两个小数相加时,结果并不是预期的精确值,而是一个近似值,,使用第三方库Math.js可以避免精度丢失的问题,本文导入Math.js库和使用Math.js的方法来进行小数运算,同时还可以指定格式来保留小数位数
    2023-12-12
  • js的函数的按值传递参数(实例讲解)

    js的函数的按值传递参数(实例讲解)

    下面小编就为大家分享一篇js的函数的按值传递参数的实例，具有很好的参考价值，一起跟随小编过来看看吧，希望对大家有所帮助
    2017-11-11
  • JavaScript调试之console.log调试的一个小技巧分享

    JavaScript调试之console.log调试的一个小技巧分享

    日常开发中经常会需要console来查看当前对象的值。当然用debugger会更全面的查看，但是总有只喜欢用console的，比如我。下面这篇文章主要给大家分享了关于JavaScript调试之console.log调试的一个小技巧，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-08-08
  • Javascript异步表单提交，图片上传，兼容异步模拟ajax技术

    Javascript异步表单提交，图片上传，兼容异步模拟ajax技术

    使用Javascript异步表单提交，图片上传，兼容异步模拟ajax技术,需要的朋友可以参考下。
    2010-05-05
  • javascript parseInt() 函数的进制转换注意细节

    javascript parseInt() 函数的进制转换注意细节

    parseInt(string, radix) 有2个参数，第一个string 是传入的数值，第二个radix是 传入数值的进制，参数radix 可以忽略，默认为 10，各种进制的数转换为 十进制整数,接下来详细介绍，感兴趣的朋友可以了解下哦
    2013-01-01
  • 微信小程序中的列表切换功能实例代码详解

    微信小程序中的列表切换功能实例代码详解

    这篇文章主要介绍了微信小程序中的列表切换功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06

最新评论