天天看點

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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="pic"><img src="pic4.jpg"/><div class=""></div></a></li>
            <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="pic"><img src="pic4.jpg"/><div class=""></div></a></li>
            <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="pic"><img src="pic4.jpg"/><div class=""></div></a></li>
            <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="pic"><img src="pic4.jpg"/><div class=""></div></a></li>
        </ul>
    </div>

</body>
</html>