本文實例講述了jQuery實現鼠標經過時高亮,同時其他同級元素變暗的效果。分享給大家供大家參考，具體如下：
<!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="關鍵詞1，關鍵詞2，關鍵詞3等等"/> <title>鼠標經過時高亮，其他的暗</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>運行效果圖如下：
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery遍歷算法與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
