Loading

土豆案例（display：none和block的应用）

利用display：none和display：blocks设置鼠标经过的一个效果。

注意的几个点：1.子绝父相定位 2.设置百分比宽高 3.播放按钮放用背景图做 4.a:hover .mask的写法

<body>
    <div class="tu">
        <a href="#">
            <img src="tu.png" alt="">
            <div class="mask"></div>
        </a>
        
    </div>
</body>
<style>
        .tu {
            width: 442px;
            height: 318px;
            position: relative;
        }
        .mask {
            width: 100%;
            height: 100%;
            background: rgba(66, 49, 49, 0.57) url("bo.png") no-repeat center;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        a:hover .mask{
            display: block;
        }
    </style>
posted @ 2018-04-10 15:34  澎湃_L  阅读(263)  评论(0)  编辑  收藏  举报