演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <style type="text/css">
            .box{
                width: 404px;height: 304px;border: 2px solid black;
                margin: 100px auto;position: relative;
            }
            .wyzx{
                width: 100px;height: 40px;text-align: center;color: white;
            }
            .wyzx .top{
                width: 100px;height: 100px;line-height: 40px;cursor: pointer;
            }
            .wyzx .bot{
                width: 400px;height: 258px;line-height: 250px;
                position: absolute;left: 0;top: 42px;
            }
            .wyzx:hover .bot{
                z-index: 2;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="wyzx fl">
                <p class="top" style="background-color: red;">1</p>
                <p class="bot" style="background-color: red;z-index: 1;">1</p>
            </div>
            <div class="wyzx fl">
                <p class="top" style="background-color: green;">2</p>
                <p class="bot" style="background-color: green;">2</p>
            </div>
            <div class="wyzx fl">
                <p class="top" style="background-color: blue">3</p>
                <p class="bot" style="background-color: blue;">3</p>
            </div>
            <div class="wyzx fl">
                <p class="top" style="background-color: orange;">4</p>
                <p class="bot" style="background-color: orange;">4</p>
            </div>
        </div>
    </body>
</html>
打开支付宝首页搜“559920739”领红包，领到大红包的小伙伴赶紧使用哦！ （如果你觉得本文不错，请扫描下面二维码随意打赏哦）
最后修改：2020 年 09 月 17 日
© 禁止转载
如果觉得我的文章对你有用，请随意赞赏