CSS高级实用技巧 -- 二维码隐藏案例

CSS高级实用技巧 – 二维码隐藏案例

html结构:

 <section>
       <img class="one" src="images/wechat.png" alt="">
       <img class="two" src="images/yjh.jpg" alt="">
   </section>

css代码:

 * {
            margin: 0;
            padding: 0;
        }
        section {
            width: 160px;
            height: 160px;
            margin: 100px auto;
            cursor: pointer;
            position: relative;
        }
        .one {
           position: absolute;
            top: 0;
            left: 0;
        }
        .two {
            position: absolute;
            left: 160px;
            top: 0;
            display: none;
        }
        section:hover .two {
            display: block;
        }