css实现鼠标移上图片遮罩效果

ie6对hover支持不完善，所以不兼容，最好在火狐或谷歌等标准浏览器中观看。Demo下载

效果如图：



css：

#demo {
width: 306px;
height: 204px;
padding: 3px;
border: 1px solid #e5e5e5;
margin: 100px auto 0 auto;
background: #fff;
}

#demo:after {
content: "";
display: block;
height: 0;
clear: both;
}

#demo:hover li span {
display: block;
}

#demo li {
float: left;
width: 100px;
height: 100px;
position: relative;
margin: 1px;
}

#demo li span {
display: none;
width: 100px;
height: 100px;
background: #000;
opacity: 0.35;
position: absolute;
top: 0;
left: 0;
overflow-y: none;
}

#demo li:hover span { display: none; }

html：

<ul id="demo">
<li><span></span><img src="images/1.jpg" alt=""></li>
<li><span></span><img src="images/2.jpg" alt=""></li>
<li><span></span><img src="images/3.jpg" alt=""></li>
<li><span></span><img src="images/4.jpg" alt=""></li>
<li><span></span><img src="images/5.jpg" alt=""></li>
<li><span></span><img src="images/6.jpg" alt=""></li>
</ul>