鼠标悬停图片变暗效果

这个效果，方法有很多种

我介绍一个简单的方法

效果的原理

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

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

JS方法

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

<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代码，都很简单：

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

JQ代码：

$(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代码在原来的基础上进行修改

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

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

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

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

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

转载自前端开发

本文链接地址: 鼠标经过地方图片变亮，其他地方图片变暗效果