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