jquery鼠标移上图片变暗

àì夳堔傛蜴生んèń 2022-09-26 11:54 194阅读 0赞

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