使用css实现鼠标移入添加遮罩(兼容ie8)

本文以图片遮罩为例。谷歌浏览器、IE8浏览器亲测兼容。

• 引入jquery(jquery-1.11.1.min.js),自行引入

• html代码

<div>
     <ul class="case">
         <li id="item_1">
             <div class="case_w" style="padding: 1% 5% 1% 5%;" align="center">
                 //被遮罩图片
                 <img src="../im图片名称" style="width:80%;height: 80%"/>
                 //遮罩部分
                 <div class="fire">
                        //可以加入遮罩要显示的你内容
                 </div>
            </div>
        </li>
    </ul>
</div>

• CSS代码

.case li .case_w {
            display: block;
            padding: 20px;
            bottom: 14px;
 }

.case li .case_w .fire {
            background: #000; //遮罩颜色
            opacity: 0.5; //遮罩颜色浓度
            filter: alpha(opacity=50);
            position: relative;
            width: 70%; //遮罩宽度
            height: 388px; //遮罩高度
            z-index: 2; //遮罩层叠位置
            display: none; //初始化不显示遮罩
            text-align: center; //遮罩位置
            margin: -388px 0 0 0;
}

• JS代码

//初始化加载事件
$(function () {
        $(".case li").hover(function () {
            //遮罩显示
            $('.fire', this).show();
        }, function () {
            //遮罩关闭
            $('.fire',this).hide();
        });
    });