让两个子div重叠在一起的实现

最新推荐文章于 2023-11-27 16:16:01 发布

转载最新推荐文章于 2023-11-27 16:16:01 发布 · 4.3k 阅读

14 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wjx-blog/p/9565932.html

博客围绕添加两个在同一位置的div展开，需求是鼠标未移上显示第一个，移上后显示半透明的第二个。详细给出了实现步骤，包括最外层div、正常显示div和鼠标移上后显示div的HTML和CSS代码，还总结了父、子div的样式设置要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

　　需要添加两个div，鼠标未移上是显示第一个，鼠标移上后，显示出来第二个半透明的。这两个div在同一位置上。

实现：

第一步：最外面包围的div

Html代码：

</div>

CSS代码：

    .Main{
        width: 220px;
        height: 120px;
        float: left;
        position: relative;
        padding: 5px 5px;
    }

第二步：正常一直显示的div

Html代码：

CSS代码：

    .defaultDiv {
        width: 100%;
        z-index: 999;
        position: absolute;
        float: left;
        left: 0;
        top: 0
    }

第三步：鼠标移上后半透明显示的div

Html代码：

CSS代码：

    .hoverDiv{
        background-color: rgba(220,38,38,0.5);
        width: 100%;
        z-index: 1000;
        position: absolute;
        float: left;
        left: 0;
        top: 0;
        visibility:hidden;
    }

总结：

　　父div上面使用 float: left; position: relative;

　　子div上使用： position: absolute; top:0px; left:0px; float: left;

转载于:https://www.cnblogs.com/wjx-blog/p/9565932.html