鼠标经过地方图片变亮，其他图片变暗效果 ，jq or css

效果的原理

原理其实很简单，首先给一个黑色的背景，通过降低图片的透明度，让黑色背景呈现出来，图片看起来就更暗。鼠标移到图片1，那么就让除了图片1的其他图片的透明度降低，让他们看起来更暗，让图片1看起来显得更亮

用两种方法来实现：
CSS方法和JS方法

JS方法

效果实例
先看看HTML代码和CSS代码
HTML代码：

1 2 3 4 5

< div class = "imglist" >      < a href = "#" >< img src = "images/530_1.jpg" ></ a >      < a href = "#" >< img src = "images/530_2.jpg" ></ a >      < a href = "#" >< img src = "images/530_3.jpg" ></ a > </ div >

CSS代码，都很简单：

1 2	.imglist { float : left ; width : 580px ;} .imglist a{ float : left ; background-color : #000 ;}

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$( function (){      $( ".imglist" ).find( "a" ).each( function (){          $( this ).hover( function (){ //当鼠标移上去时                //它的兄弟图片透明度降到0.7              $( this ).siblings().find( "img" ).stop().fadeTo( "slow" ,0.7);          },          function (){ //当鼠标移出的时候                    //它的兄弟图片透明度回到1              $( this ).siblings().find( "img" ).stop().fadeTo( "slow" ,1);          });      }); })

这里解释为什么要用stop()方法，是为了防止有人在区域内，快速移动，导致fadeTo动画效果频繁执行，造成CPU占用率过高。所以在下一个fadeTo动画执行开始的时候，把前面还没有执行完的fadeTo动画停止掉

CSS方法

CSS按照前面的原理实现起来也是非常简单的，只是为了兼容IE6实现起来麻烦一些，后面我会专门讲到。
HTML代码不变，CSS代码在原来的基础上进行修改

1 2 3 4 5 6 7 8

.imglist:hover img{      opacity: 0.7 ;      filter:alpha(opacity= 70 ); } .imglist:hover img:hover{      opacity: 1 ;      filter:alpha(opacity= 100 ); }

到这其实效果已经出来了，但没有JQuery效果那么漂亮，没有过渡效果；呵呵，再来加几句代码

1 2 3 4 5

.imglist img{      -moz-transition:opacity . 7 s cubic-bezier( 0.2 , 0.4 , 0.7 , 0.8 );      -webkit-transition:opacity . 7 s cubic-bezier( 0.2 , 0.4 , 0.7 , 0.8 );      transition:opacity . 7 s cubic-bezier( 0.2 , 0.4 , 0.7 , 0.8 ); }

在IE10，火狐，谷歌等高级浏览器中可以看到过渡的效果了，IE10以下的IE没有过渡效果
效果实例

上面的代码其实已经兼容了大部分浏览器了，但坑爹的IE6还没效果，因为IE6不支持a标签以外的:hover元素。有兴趣的人可以利用IE条件注释自己写个兼容代码兼容IE6