jQuery实现的仿商城图片变亮变暗效果,鼠标悬停图片之后该图片变亮,其他图片变暗。移开鼠标所有图片变亮,兼容主流浏览器,适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗,有需要的小伙伴可以参考下。
以下是完整源代码:
a {color:white;}
body{background:#000;}
body,div,ul,li,img{padding:0;margin:0; border:0; list-style:none;}
.hovertreebox{width:630px; border:1px solid #ccc; margin:10px auto; overflow:hidden; padding:10px 0 0 10px;}
.hovertreebox li{width:200px; height:186px; float:left; margin-right:10px; margin-bottom:10px; cursor:pointer;}
$(function(){
$('.hovertreebox li').mouseover(function (e) {
$(this).siblings().stop().fadeTo(500,0.4);
});
$('.hover'+'treebox li').mouseout(function (e) {
$(this).siblings().stop().fadeTo(500,1);
});
})
以上所述就是本文的全部内容了,希望大家能够喜欢。
更多信息请查看IT技术专栏