效果图：

当鼠标经过图片时，其余图片变暗，来高亮显示当前图片，主要用的是对比度。当然你也可以先把其他图片默认变暗，鼠标经过时高亮显示，不过，无鼠标经过时整体图片都会是偏暗色调。

效果可以通过 三步实现：

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 的 方法来遍历所有图片元素，使用 方法将被选元素的不透明度逐  渐地改变为指定的值，达到整体变暗，局部高亮的效果。

    

$(this).hover(function() {$(this).siblings().find(".display").stop();      //找到当前元素的后代，筛选出 class 为 display 的元素，停止活动$(this).siblings().find(".display").fadeTo("fast",0.3);   //让当前元素的后代中class为display的元素的透明度变为0.3}

 

效果图源代码如下：