任意大小盒子鼠标经过添加遮罩

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:'+ _width +'px;"></div><div class="ico" style="height:'+ _height+'px;width:'+ _width +'px;"></div>');        //设置遮罩层高宽等于当前对象的高宽
            },function(){
                $('.keep').remove();
                $('.ico').remove();
            })
        })
    })
</script>

效果图：

素材图片：

 

 

 

 

 

posted @ 2013-11-27 09:00  白小虫  阅读(383)  评论(0)  编辑  收藏  举报