分享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)文章
寫作本文旨在加深自己印象，也為了更多人的了解到JS編碼風格，提高自己的編碼質(zhì)量。想了解更多的內(nèi)容請閱讀《編寫可維護的JavaScript》2016-08-08
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單打磚塊彈球小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了javascript判斷firebug是否開啟的方法,結(jié)合實例形式分析了javascript基于console控制臺方法判斷firebug開啟狀態(tài)的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
用eval方法，把傳進來的這個方法名所代表的方法當作一個對象來賦值給method1的func屬性,需要的朋友可以參考下2014-04-04
在JavaScript中進行小數(shù)運算時,會容易出現(xiàn)精度丟失的問題,例如在進行兩個小數(shù)相加時,結(jié)果并不是預(yù)期的精確值,而是一個近似值,,使用第三方庫Math.js可以避免精度丟失的問題,本文導(dǎo)入Math.js庫和使用Math.js的方法來進行小數(shù)運算,同時還可以指定格式來保留小數(shù)位數(shù)2023-12-12
下面小編就為大家分享一篇js的函數(shù)的按值傳遞參數(shù)的實例，具有很好的參考價值，一起跟隨小編過來看看吧，希望對大家有所幫助2017-11-11
JavaScript調(diào)試之console.log調(diào)試的一個小技巧分享
日常開發(fā)中經(jīng)常會需要console來查看當前對象的值。當然用debugger會更全面的查看，但是總有只喜歡用console的，比如我。下面這篇文章主要給大家分享了關(guān)于JavaScript調(diào)試之console.log調(diào)試的一個小技巧，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
Javascript異步表單提交，圖片上傳，兼容異步模擬ajax技術(shù)
使用Javascript異步表單提交，圖片上傳，兼容異步模擬ajax技術(shù),需要的朋友可以參考下。2010-05-05
javascript parseInt() 函數(shù)的進制轉(zhuǎn)換注意細節(jié)
parseInt(string, radix) 有2個參數(shù)，第一個string 是傳入的數(shù)值，第二個radix是 傳入數(shù)值的進制，參數(shù)radix 可以忽略，默認為 10，各種進制的數(shù)轉(zhuǎn)換為 十進制整數(shù),接下來詳細介紹，感興趣的朋友可以了解下哦2013-01-01
這篇文章主要介紹了微信小程序中的列表切換功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06