效果图：css
当鼠标通过图片时，其他图片变暗，来高亮显示当前图片，主要用的是对比度。固然你也能够先把其余图片默认变暗，鼠标通过时高亮显示，不过，无鼠标通过时总体图片都会是偏暗色调。html
效果能够经过 三步实现：jquery
一、排列图片浏览器
图片位置：DIV+CSSpost
二、添加遮罩this
遮罩设置+透明度设置： CSSspa
filter:alpha(opacity=30); /* IE 浏览器支持 */ ;
-moz-opacity:0.3; /* 遨游浏览器 火狐浏览器 支持 */ ;
opacity: 0.3; /* 支持CSS3的浏览器（FF 1.5也支持）*/”>
三、鼠标事件code
鼠标通过hover 事件：JQueryxml
当图片有多张时，鼠标滑动到某一张图片，其余全部图片的透明度都要变暗，这就须要经过JQuery 的 siblings() 方法来遍历全部图片元素，使用 fadeTo() 方法将被选元素的不透明度逐 渐地改变为指定的值，达到总体变暗，局部高亮的效果。htm
$(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>