jquery鼠标移上图片变暗

来源：互联网发布：it培训前景编辑：程序博客网时间：2024/05/02 04:49
<!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>
0 0