jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)高亮,同時(shí)其他同級(jí)元素變暗的效果
本文實(shí)例講述了jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)高亮,同時(shí)其他同級(jí)元素變暗的效果。分享給大家供大家參考,具體如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta name="keywords" content="關(guān)鍵詞1,關(guān)鍵詞2,關(guān)鍵詞3等等"/> <title>鼠標(biāo)經(jīng)過(guò)時(shí)高亮,其他的暗</title> <style type="text/css"> *{margin:0; padding:0;} ul,li{list-style:none;} ul{width:900px; height:200px; margin:100px auto;} li{width:200px; height:200px; display:inline-block; border:1px solid #d8d8d8; position:relative;} .addblack{width:200px; height:200px; display:none; background:#000;filter: alpha(opacity=10);-moz-opacity: 0.1; opacity: 0.1; position:absolute; left:0; top:0;} </style> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".index_Img").hover(function(){ $(this).siblings().find(".addblack").show(); },function(){ $(this).siblings().find(".addblack").hide(); $(this).find(".addblack").hide(); }) }) </script> </head> <body> <ul> <li class="index_Img"> 蘋(píng)果 <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div> </li> <li class="index_Img"> 香蕉 <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div> </li> <li class="index_Img"> 葡萄 <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div> </li> <li class="index_Img"> 鳳梨 <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div> </li> </ul> </body> </html>
運(yùn)行效果圖如下:
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jquery實(shí)現(xiàn)圖片列表鼠標(biāo)移入微動(dòng)
- jQuery實(shí)現(xiàn)鼠標(biāo)選中文字后彈出提示窗口效果【附demo源碼】
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)購(gòu)物車(chē)出現(xiàn)下拉框代碼(推薦)
- 使用jQuery或者原生js實(shí)現(xiàn)鼠標(biāo)滾動(dòng)加載頁(yè)面新數(shù)據(jù)
- jQuery實(shí)現(xiàn)滾動(dòng)鼠標(biāo)放大縮小圖片的方法(附demo源碼下載)
- jquery實(shí)現(xiàn)鼠標(biāo)懸浮停止輪播特效
- jQuery移動(dòng)頁(yè)面開(kāi)發(fā)中的觸摸事件與虛擬鼠標(biāo)事件簡(jiǎn)介
- jQuery實(shí)現(xiàn)仿QQ空間裝扮預(yù)覽圖片的鼠標(biāo)提示效果代碼
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)時(shí)出現(xiàn)隱藏層文字鏈接的方法
- JQuery獲取鼠標(biāo)進(jìn)入和離開(kāi)容器的方向
相關(guān)文章
AJAX和jQuery動(dòng)態(tài)加載數(shù)據(jù)的實(shí)現(xiàn)方法
本文給大家介紹使用ajax和jquery動(dòng)態(tài)加載數(shù)據(jù)的實(shí)現(xiàn)方法,使用jQuery可以簡(jiǎn)化這個(gè)過(guò)程。下面通過(guò)實(shí)例代碼給大家介紹下,需要的的朋友參考下吧2016-12-12JQuery DataTable刪除行后的頁(yè)面更新利用Ajax解決
使用Jquery的DataTable進(jìn)行數(shù)據(jù)表處理非常方便,常遇到的一個(gè)問(wèn)題就是刪除一行后頁(yè)面必須進(jìn)行更新,下面與大家分享下使用Ajax的解決方法2013-05-05jquery提取元素里的純文本不包含span等里的內(nèi)容
如何實(shí)現(xiàn)提取元素里的純文本,不包含span等里的內(nèi)容,這就是本文要為大家介紹的重點(diǎn),你將學(xué)會(huì)使用jquery來(lái)實(shí)現(xiàn)2013-09-09jQuery和hwSlider實(shí)現(xiàn)內(nèi)容響應(yīng)式可觸控滑動(dòng)切換效果附源碼下載(二)
這篇文章主要介紹了jQuery和hwSlider實(shí)現(xiàn)內(nèi)容響應(yīng)式可觸控滑動(dòng)切換效果附源碼下載(二)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06解決jquery中動(dòng)態(tài)新增的元素節(jié)點(diǎn)無(wú)法觸發(fā)事件問(wèn)題的兩種方法
這篇文章主要分享了解決jquery中動(dòng)態(tài)新增的元素節(jié)點(diǎn)無(wú)法觸發(fā)事件問(wèn)題的兩種方法,感興趣的小伙伴們可以參考一下2015-10-10jquery 得到當(dāng)前頁(yè)面高度和寬度的兩個(gè)函數(shù)
得到當(dāng)前頁(yè)面高度和寬度的兩個(gè)函數(shù)2010-02-02jquery使用正則表達(dá)式驗(yàn)證email地址的方法
這篇文章主要介紹了jquery使用正則表達(dá)式驗(yàn)證email地址的方法,以實(shí)例形式分析了正則表達(dá)式的使用技巧,需要的朋友可以參考下2015-01-01讓jQuery Mobile不顯示討厭loading界面的方法
jQuery Mobile總是顯示討厭的loading界面,下面有個(gè)不錯(cuò)的解決方法,大家可以參考下2014-02-02jQuery中可見(jiàn)性過(guò)濾器簡(jiǎn)單用法示例
這篇文章主要介紹了jQuery中可見(jiàn)性過(guò)濾器簡(jiǎn)單用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery中可見(jiàn)性過(guò)濾器的原理及相關(guān)使用技巧,需要的朋友可以參考下2018-03-03