分享JS代碼實現(xiàn)鼠標放在輸入框上輸入框和圖片同時更換樣式
更新時間：2016年09月01日 16:22:26 作者：yangzailu
在一些網(wǎng)站我們會見到，當鼠標放在輸入框上輸入框和圖片同時更換樣式，那么基于js代碼是如何實現(xiàn)的呢？下面小編給大家解答下
廢話不多說了，直接給大家貼關(guān)鍵代碼了，具體代碼如下所示：
<!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代碼實現(xiàn)鼠標放在輸入框上輸入框和圖片同時更換樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
作用域是JavaScript最重要的概念之一，想要學(xué)好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對JavaScript作用域鏈作簡單的介紹，希望能幫助大家更好的學(xué)習(xí)JavaScript。2014-05-05
本文通過實例給大家分享了原生JS進行前后端同構(gòu)的相關(guān)知識點以及相關(guān)代碼，有需要的朋友參考學(xué)習(xí)下。2018-04-04
這篇文章主要介紹了javascript常用函數(shù)，15個常用函數(shù)，都具有很高的實用性，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了velocity.js實現(xiàn)頁面滾動切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
javascript 裝載iframe子頁面，自適應(yīng)高度
2009-03-03
今天小編就為大家分享一篇在layui下對元素進行事件綁定的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
React Native JSI實現(xiàn)RN與原生通信的示例代碼
本文主要介紹了React Native JSI實現(xiàn)RN與原生通信的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
深入理解JavaScript創(chuàng)建對象的多種方式以及優(yōu)缺點
本篇文章主要介紹了JavaScript創(chuàng)建對象的多種方式以及優(yōu)缺點，主要介紹了5種方式，有興趣的可以了解下2017-06-06
這篇文章主要為大家詳細介紹了微信小程序自定義Dialog彈框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
今天小編就為大家分享一篇layui清除radio的選中狀態(tài)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11