JQuery 实现鼠标经过图片高亮显示，其余图片变暗
效果图：
当鼠标经过图片时，其余图片变暗，来高亮显示当前图片，主要用的是对比度。当然你也可以先把其他图片默认变暗，鼠标经过时高亮显示，不过，无鼠标经过时整体图片都会是偏暗色调。
效果可以通过 三步实现：
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>
