效果圖：
當鼠標經過圖片時，其余圖片變暗，來高亮顯示當前圖片，主要用的是對比度。當然你也可以先把其他圖片默認變暗，鼠標經過時高亮顯示，不過，無鼠標經過時整體圖片都會是偏暗色調。
效果可以通過 三步實現：
1、排列圖片
圖片位置：DIV+CSS
2、添加遮罩
遮罩設置+透明度設置： CSS
filter:alpha(opacity=30); /* IE 瀏覽器支持 */ ;
-moz-opacity:0.3; /* 遨游瀏覽器 火狐瀏覽器 支持 */ ;
opacity: 0.3; /* 支持CSS3的瀏覽器（FF 1.5也支持）*/”>
3、鼠標事件
鼠標經過hover 事件：JQuery
當圖片有多張時，鼠標滑動到某一張圖片，其他所有圖片的透明度都要變暗，這就需要通過JQuery 的 siblings() 方法來遍歷所有圖片元素，使用 fadeTo() 方法將被選元素的不透明度逐 漸地改變為指定的值，達到整體變暗，局部高亮的效果。
$(this).hover(function() { $(this).siblings().find(".display").stop(); //找到當前元素的后代，篩選出 class 為 display 的元素，停止活動 $(this).siblings().find(".display").fadeTo("fast",0.3); //讓當前元素的后代中class為display的元素的透明度變為0.3 }
效果圖源代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="style/jquery-1.4.2.min.js"></script> <style type="text/css"> .pos_abs{position:absolute;} .pic{position:absolute;} .display {position:absolute;background:#000;opacity:0;filter:alpha(opacity=0);} .m1 {left:0;top:0;width:480px;height:360px;} .m2 {left:0;top:0;width:300px;height:150px;} .m3 {left:490px;top:150px;width:300px;height:210px;} </style> <script> $(function() { $(".pic").find("a").each(function() { $(this).hover(function() { $(this).siblings().find(".display").stop(); $(this).siblings().find(".display").fadeTo("fast",0.3); }, function() { $(this).siblings().find(".display").stop(); $(this).siblings().find(".display").fadeTo("fast",0); }); }); }) </script> </head> <body> <div class="pic"> <a href="#" ><img src="images/4.jpg" /><div class="display m1"></div></a> <a href="#" class="pos_abs"><img src="images/2.jpg" /><div class="display m2"></div></a> <a href="#" ><img src="images/3.jpg" /><div class="display m3"></div></a> </div> </body> </html>