css实现鼠标移上图片遮罩效果

 

ie6对hover支持不完善，所以不兼容，最好在火狐或谷歌等标准浏览器中观看。Demo下载

效果如图：

 

css：

    #demo {
        width: 306px;
        height: 204px;
        padding: 3px;
        border: 1px solid #e5e5e5;
        margin: 100px auto 0 auto;
        background: #fff;
    }

    #demo:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
    }

    #demo:hover li span {
        display: block;
    }

    #demo li {
        float: left;
        width: 100px;
        height: 100px;
        position: relative;
        margin: 1px;
    }

    #demo li span {
        display: none;
        width: 100px;
        height: 100px;
        background: #000;
        opacity: 0.35;
        position: absolute;
        top: 0;
        left: 0;
        overflow-y: none;
    }

    #demo li:hover span { display: none; }

html：

    <ul id="demo">
        <li><span></span><img src="images/1.jpg" alt=""></li>
        <li><span></span><img src="images/2.jpg" alt=""></li>
        <li><span></span><img src="images/3.jpg" alt=""></li>
        <li><span></span><img src="images/4.jpg" alt=""></li>
        <li><span></span><img src="images/5.jpg" alt=""></li>
        <li><span></span><img src="images/6.jpg" alt=""></li>
    </ul>

 

转载于:https://www.cnblogs.com/k13web/p/4139874.html