jquery鼠标移上图片变暗-蒲公英云

jquery鼠标移上图片变暗

<!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>