HTML：
<body> <div id="div2" class="mouseHover"></div> <ul><li class="mouseHover"></li></ul> <div id="div1" class="mouseHover"></div> <div id="div3" class="mouseHover"></div> </body>
CSS：
<style> *{margin: 0px;padding: 0px;} body{padding: 100px;} ul li{list-style: none;} li{float: left;height: 150px;width: 200px;background: #f99;margin: 2px;} #div1{width: 400px;height: 300px;background: #f99;float: left;margin: 2px;} #div2{width: 200px;height: 500px;background: #f99;float: left;margin: 2px;} #div3{width: 500px;height: 100px;background: #f99;float: left;margin: 2px;} .keep{background: #000;position: absolute;left: 0;top: 0;opacity: 0.2;filter: alpha(opacity=20);z-index: 1;} .ico{background: url(ico.png) no-repeat center center;position: absolute;top: 0;left: 0;z-index: 2;cursor: pointer;} </style>
JS：
<script src="jquery.js"></script> <script> $(function(){ var aDiv = $('.mouseHover'); //查找出所有需要添加效果的对象 aDiv.each(function(index){ aDiv.eq(index).hover(function(){ var _width = $(this).width(); //获取当前对象的宽度 var _height = $(this).height(); //获取当前对象的高度 $(this) .css({'position':'relative',}) .append('<div class="keep" style="height:'+ _height+'px;'+ _width +'px;"></div><div class="ico" style="height:'+ _height+'px;'+ _width +'px;"></div>'); //设置遮罩层高宽等于当前对象的高宽 },function(){ $('.keep').remove(); $('.ico').remove(); }) }) }) </script>
效果图：
素材图片：
