浏览聚美优品的时候看到的这个效果，鼠标移入图片后，当前图为高亮，*图片为灰色显示，移出图片区域后，图片重新变为高亮。挺绕口的，直接上代码，大家预览看下就晓得了，这种效果貌似电商网站用的还比较多。 代码图片直接用的聚美优品的，在此说明一下。 本来想用javascript写的，有思路，但是掌握不熟练，无从下手，遂改用jQuery写，代码很简单，一看即可明白。
小知识点：
1.jQuery中鼠标经过为mouseover，鼠标离开为mouseout。
2.透明度设置的css代码：opacity:0.5;
filter:alpha(opacity=50);
代码：
无标题文档 - 锐客网 *{margin:0;
padding:0;
}
li{ list-style:none;
}#top_banner{ width:400px;
}
#top_banner li{}
#top_banner li a{ position:relative;
display:block;
width:190px;
height:150px;
float: left;
margin-right:10px;
margin-bottom:10px;
}
.mask_Layout{ width:190px;
height:150px;
position:absolute;
left:0;
top:0;
}
.cur .mask_Layout{
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
}
文章图片
文章图片
文章图片
文章图片
【鼠标移入/移出改变图片透明度_jQuery效果】转载自:http://www.9958.pw/post/html_img_mouseout
