<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hover</title>
<script src="jquery.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
.box li{ width:300px; height:200px; position:relative; float:left;}
.box li a img{width:300px; height:200px;}
.mask{ position:absolute; left:0; top:0; width:300px; height:200px; background:#000; filter:alpha(opacity=60); opacity:0.6; }
</style>
<script type="text/javascript">
$(document).ready(function(){
/*$(".box li a").each(function(){
$(this).hover(
function(){
var $items = $(".box li a");
t = setInterval(function(){
$items.find("div").addClass("mask");
},300);
},function(){
clearInterval(t);
$(this).find("div").removeClass("mask");
})
});*/
$(".box li a").mask();
})
$.fn.mask = function(){
var items = $(this);
$.each(items, function(index, item){
$(item).hover(function(){
$(this).find("div").addClass("mask");
}, function(){
$(this).find("div").removeClass("mask");
});
});
};
</script>
</head>
<body>
<div class="box">
<ul>
<li><a href="#" class="pic"><img src="pic4.jpg"/><div class=""></div></a></li>
<li><a href="#" class="pic"><img src="pic4.jpg"/><div class=""></div></a></li>
<li><a href="#" class="pic"><img src="pic4.jpg"/><div class=""></div></a></li>
<li><a href="#" class="pic"><img src="pic4.jpg"/><div class=""></div></a></li>
</ul>
</div>
</body>
</html>