实现鼠标放到一个div上显示出另一个隐藏的div

最新推荐文章于 2024-01-29 11:12:36 发布

Jredreamer

最新推荐文章于 2024-01-29 11:12:36 发布

阅读量5.8w

点赞数 8

分类专栏： Web前端

本文链接：https://blog.csdn.net/zhang_red/article/details/42426709

版权

Web前端专栏收录该内容

85 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title>CSS Test Page</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .cent{
            background:#0CF; height:200px; width:100px;
        }
        .cs{
            width:100px;
            height:200px;
            background:#F09;
            top:0px;
            position:absolute;
            opacity: 0;
            display: block;
            font-size: 12px;
            transition: 0.3s;
            -webkit-transition: .5s;
            -moz-transition: .5s;
        }
        .cent:hover .cs{
            color: #656e73;
            opacity: 1;
        }
    </style>

</head>
<body>

<div class="cent">
    This is the cent div
    <div class="cs">
        <p>this is a cs div</p>
    </div>
</div>

</body>
</html>

Jredreamer

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
实现鼠标放到一个div上显示出另一个隐藏的div

CSS Test Page *{ margin: 0; padding: 0; } .cent{ background:#0CF; height:200px; width:100px; } .cs{ width:1
复制链接

扫一扫