鼠標(biāo)點擊input,顯示瞬間的邊框顏色,對之修改與隱藏實例
更新時間：2016年12月26日 09:53:55 投稿：jingxian
下面小編就為大家?guī)硪黄髽?biāo)點擊input,顯示瞬間的邊框顏色,對之修改與隱藏實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦
示例的是項目中的遇到的，要做成的效果是點擊該圖片按鈕，達到切換圖片的效果：
HTML代碼如下：
<input class="dBox3Ulimg" type="image" src="img/newselect.png"/> <input class="dBox3Ulimg" type="image" src="img/yesselect.png" style="display: none;"/>
JS代碼如下：
$(document).ready(function(){
$(".dBox3Ulimg").click(function(){
$(".dBox3Ulimg").toggle();
});
});
點擊圖片按鈕的瞬間的樣式如下圖：
但是在點擊的圖片按鈕的瞬間，圖片出現(xiàn)了帶有淡藍色的顏色邊框，在松開鼠標(biāo)的瞬間便又消失，為了去掉這瞬間的點擊顏色效果，可以通過focus偽類去實現(xiàn)，具體代碼如下：
1、去掉（隱藏）邊框的顏色
input:focus {
outline:none;
}
再點擊圖片按鈕的樣式，就不會出現(xiàn)上圖中的淡藍色的邊框顏色了，也能正常切換圖片。
2、修改邊框的顏色
input:focus{
outline:1px solid red;
}
同理，修改邊框的顏色為紅色，便如下圖：
以上就是小編為大家?guī)淼氖髽?biāo)點擊input,顯示瞬間的邊框顏色,對之修改與隱藏實例全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
讓mayfish支持mysqli數(shù)據(jù)庫驅(qū)動的實現(xiàn)方法
mysql 是非持繼連接函數(shù)而 mysqli 是永遠連接函數(shù)。也就是說 mysql 每次鏈接都會打開一個連接的進程而 mysqli 多次運行 mysqli 將使用同一連接進程,從而減少了服務(wù)器的開銷。2010-05-05
Layui框架的table.render方法是用于渲染表格的核心功能,通過配置對象定義表格樣式、列和數(shù)據(jù)源,cols數(shù)組中的每個對象通過field屬性與數(shù)據(jù)源綁定,指定要顯示的數(shù)據(jù)字段,本文給大家介紹Layui?table.render的使用,感興趣的朋友一起看看吧2024-09-09
JS模擬實現(xiàn)ECMAScript5新增的數(shù)組方法
ECMAScript5 新增了十個數(shù)組方法，這些方法只有在ie9及以上瀏覽器中可以被使用，下面是對于這些方法的模擬實現(xiàn)簡單介紹下，需要的朋友參考下2017-03-03
在這篇文章中給大家分享了關(guān)于JavaScript實用代碼小技巧的相關(guān)內(nèi)容，有興趣的朋友們可以參考學(xué)習(xí)下。2018-08-08
bootstrap-closable-tab可實現(xiàn)關(guān)閉的tab標(biāo)簽頁插件
這篇文章主要為大家詳細介紹了bootstrap-closable-tab可實現(xiàn)關(guān)閉的tab標(biāo)簽頁插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
輪播停留與無線滾動十分類似，都是利用屬性及變量控制移動實現(xiàn)輪播。下面通過本文給大家分享JavaScript輪播停留效果的實現(xiàn)思路，感興趣的朋友一起看看吧2018-05-05
微信小程序使用自定義組件導(dǎo)航實現(xiàn)當(dāng)前頁面高亮
這篇文章主要介紹了微信小程序使用自定義組件導(dǎo)航實現(xiàn)當(dāng)前頁面高亮，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了JavaScript類繼承及實例化的方法,較為詳細的分析了javascript擴展類、實例化類及類對象與成員函數(shù)的使用技巧,需要的朋友可以參考下2015-07-07
這篇文章主要為大家介紹了JavaScript常見事件源與事件流的獲取方法及解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法示例
這篇文章主要介紹了JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法,結(jié)合具體實例形式分析了JS采用鏈?zhǔn)讲僮鞣椒ǚ庾Query中連綴操作實現(xiàn)css()方法的相關(guān)技巧,需要的朋友可以參考下2017-04-04