jQuery實現(xiàn)鼠標經(jīng)過時高亮,同時其他同級元素變暗的效果
本文實例講述了jQuery實現(xiàn)鼠標經(jīng)過時高亮,同時其他同級元素變暗的效果。分享給大家供大家參考,具體如下:
<!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>鼠標經(jīng)過時高亮,其他的暗</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"> 蘋果 <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>
運行效果圖如下:
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jquery實現(xiàn)圖片列表鼠標移入微動
- jQuery實現(xiàn)鼠標選中文字后彈出提示窗口效果【附demo源碼】
- jQuery實現(xiàn)鼠標經(jīng)過購物車出現(xiàn)下拉框代碼(推薦)
- 使用jQuery或者原生js實現(xiàn)鼠標滾動加載頁面新數(shù)據(jù)
- jQuery實現(xiàn)滾動鼠標放大縮小圖片的方法(附demo源碼下載)
- jquery實現(xiàn)鼠標懸浮停止輪播特效
- jQuery移動頁面開發(fā)中的觸摸事件與虛擬鼠標事件簡介
- jQuery實現(xiàn)仿QQ空間裝扮預(yù)覽圖片的鼠標提示效果代碼
- jQuery實現(xiàn)鼠標經(jīng)過時出現(xiàn)隱藏層文字鏈接的方法
- JQuery獲取鼠標進入和離開容器的方向
相關(guān)文章
AJAX和jQuery動態(tài)加載數(shù)據(jù)的實現(xiàn)方法
本文給大家介紹使用ajax和jquery動態(tài)加載數(shù)據(jù)的實現(xiàn)方法,使用jQuery可以簡化這個過程。下面通過實例代碼給大家介紹下,需要的的朋友參考下吧2016-12-12JQuery DataTable刪除行后的頁面更新利用Ajax解決
使用Jquery的DataTable進行數(shù)據(jù)表處理非常方便,常遇到的一個問題就是刪除一行后頁面必須進行更新,下面與大家分享下使用Ajax的解決方法2013-05-05jquery提取元素里的純文本不包含span等里的內(nèi)容
如何實現(xiàn)提取元素里的純文本,不包含span等里的內(nèi)容,這就是本文要為大家介紹的重點,你將學會使用jquery來實現(xiàn)2013-09-09jQuery和hwSlider實現(xiàn)內(nèi)容響應(yīng)式可觸控滑動切換效果附源碼下載(二)
這篇文章主要介紹了jQuery和hwSlider實現(xiàn)內(nèi)容響應(yīng)式可觸控滑動切換效果附源碼下載(二)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06解決jquery中動態(tài)新增的元素節(jié)點無法觸發(fā)事件問題的兩種方法
這篇文章主要分享了解決jquery中動態(tài)新增的元素節(jié)點無法觸發(fā)事件問題的兩種方法,感興趣的小伙伴們可以參考一下2015-10-10讓jQuery Mobile不顯示討厭loading界面的方法
jQuery Mobile總是顯示討厭的loading界面,下面有個不錯的解決方法,大家可以參考下2014-02-02