js實(shí)現(xiàn)背景圖片感應(yīng)鼠標(biāo)變化的方法
本文實(shí)例講述了js實(shí)現(xiàn)背景圖片感應(yīng)鼠標(biāo)變化的方法。分享給大家供大家參考。具體分析如下:
鼠標(biāo)點(diǎn)擊后背景圖片變化,點(diǎn)擊另外一個(gè)菜單項(xiàng)前面的會(huì)自動(dòng)恢復(fù)背景,其實(shí)這個(gè)如果單純使用CSS是沒辦法做的,我們還要使用JS來判斷鼠標(biāo)狀態(tài),代碼如下:
<style type="text/css"> .dh a{ background:#FFFFCC; width:50px; height:30px; display:block; text-align:center; color:#000000; } .dh a:hover{ background:#FF9900; } </style> </head> <body> <div> <div class="dh"><a href="#">導(dǎo)航1</a></div> <div class="dh"><a href="#">導(dǎo)航2</a></div> <div class="dh"><a href="#">導(dǎo)航3</a></div> <div class="dh"><a href="#">導(dǎo)航4</a></div> <div class="dh"><a href="#">導(dǎo)航5</a></div> </div> <script type="text/javascript"> $(function(){ $(".dh a").click(function(){ $(".dh a").removeAttr("style"); $(this).attr("style","background:#CCFF99;"); }) }) </script>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- picLazyLoad 實(shí)現(xiàn)圖片延時(shí)加載(包含背景圖片)
- jquery動(dòng)態(tài)切換背景圖片的簡(jiǎn)單實(shí)現(xiàn)方法
- 改變iOS應(yīng)用中UITableView的背景顏色與背景圖片的方法
- Android自定義Button并設(shè)置不同背景圖片的方法
- javascript設(shè)置頁面背景色及背景圖片的方法
- Android編程簡(jiǎn)單實(shí)現(xiàn)ImageView點(diǎn)擊時(shí)背景圖修改的方法
- 利用jQuery和CSS將背景圖片拉伸
- android中實(shí)現(xiàn)背景圖片顏色漸變方法
- js根據(jù)鼠標(biāo)移動(dòng)速度背景圖片自動(dòng)旋轉(zhuǎn)的方法
- js實(shí)現(xiàn)背景圖自適應(yīng)窗口大小
相關(guān)文章
ES6基礎(chǔ)之 Promise 對(duì)象用法實(shí)例詳解
這篇文章主要介紹了ES6基礎(chǔ)之 Promise 對(duì)象用法,結(jié)合實(shí)例形式詳細(xì)分析了ES6中 Promise 對(duì)象功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-08-08淺談webpack性能榨汁機(jī)(打包速度優(yōu)化)
這篇文章主要介紹了淺談webpack性能榨汁機(jī)(打包速度優(yōu)化),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01Firefox中beforeunload事件的實(shí)現(xiàn)缺陷淺析
beforeunload 指在頁面卸載前提供的最后一次JS執(zhí)行的機(jī)會(huì)2012-05-05微信小程序開發(fā)(二)圖片上傳+服務(wù)端接收詳解
本篇文章主要介紹了微信小程序開發(fā)(二)圖片上傳+服務(wù)端接收,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01微信小程序發(fā)布新版本時(shí)自動(dòng)提示用戶更新的方法
這篇文章主要介紹了微信小程序發(fā)布新版本時(shí)自動(dòng)提示用戶更新的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06用headjs來管理和加載js 提高網(wǎng)站加載速度
headjs其實(shí)是一整套的工具,本文介紹的是它其中的Javascript Loader功能。需要的朋友可以參考下2016-11-11JS定時(shí)器用法分析【時(shí)鐘與菜單中的應(yīng)用】
這篇文章主要介紹了JS定時(shí)器用法,結(jié)合時(shí)鐘與菜單中的應(yīng)用分析了JS中setInterval與setTimeout操作時(shí)間的相關(guān)技巧,需要的朋友可以參考下2016-12-12