css鼠标移上去显示

最新推荐文章于 2023-11-08 14:34:54 发布

追丰少年

最新推荐文章于 2023-11-08 14:34:54 发布

阅读量10w+

点赞数 1

分类专栏： css 文章标签： css javascript html

本文链接：https://blog.csdn.net/Ghjkku/article/details/125274590

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title>CSS Test Page</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .jueduidingwei_fu {
           position: relative;
        }

        .jueduidingwei_zi {
            display: none;
            text-decoration: none;
        }

        .jueduidingwei_fu:hover .jueduidingwei_zi {
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            /*加入了绝对定位的盒子可以直接设置高度和宽度*/
            width: 60px;
            height: 25px;
            line-height: 25px;
            text-decoration: none;
            color: #FFFFFF;
            font-size: 12px;
            text-align: center;
            background: rgba(26, 104, 210);
            border-radius: 10px;
        }
    </style>

</head>
<body>

    <div style="padding:2px;width: 319px;" class="jueduidingwei_fu">
        <div style="padding: 2%; height:245px;width: 315px;background-color:#041f48;border-radius:15px;" id="container_1"></div>
        <a href="#" class="jueduidingwei_zi" download="目标数据.xlsx">下载数据</a>
    </div>

</body>
</html>
</span>