CSS3鼠标放上按钮悬浮框提示效果

最新推荐文章于 2024-06-19 22:36:06 发布

萧逸才

最新推荐文章于 2024-06-19 22:36:06 发布

阅读量1.7w

点赞数 7

分类专栏：前端 css3 文章标签： css3

本文链接：https://blog.csdn.net/xyc_csdn/article/details/69206691

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            text-align: center;
        }

        p {
            margin: 100px;
        }

        .tip {
            display: inline-block;
            position: relative;
        }

        .tip:before, .tip:after {
            opacity: 0; /*透明度为完全透明*/
            position: absolute;
            z-index: 1000; /*设为最上层*/
            /*鼠标放上元素上时的动画，鼠标放上后效果在.tip-*:hover:before, .tip-*:hover:after中设置;
            0.3s:规定完成过渡效果需要多少秒或毫秒,ease:规定慢速开始，然后变快，然后慢速结束的过渡效果*/
            transition: 0.3s ease;
            -webkit-transition: 0.3s ease;
            -moz-transition: 0.3s ease;
        }

        .tip:before {
            content: '';
            border: 6px solid transparent;
        }

        .tip:after {
            content: attr(data-tip); /*后去要提示的文本*/
            padding: 5px;
            white-space: nowrap; /*强制不换行*/
            background-color: #000000;
            color: #ffffff;
        }

        .tip:hover:before, .tip:hover:after {
            opacity: 1; /*鼠标放上时透明度为完全显示*/
            z-index: 1000;
        }

        /*top*/
        .tip-top:before {
            bottom: 100%;
            left: 50%;
            border-top-color: rgba(0, 0, 0, 0.8); /*小三角效果*/
            margin-left: -3px;
            margin-bottom: -12px;
        }

        .tip-top:after {
            bottom: 100%;
            left: 50%;
            margin-left: -6px;
        }

        .tip-top:hover:before {
            margin-bottom: -6px;
        }

        .tip-top:hover:after {
            margin-bottom: 6px;
        }

        /*bottom*/
        .tip-bottom:before {
            top: 100%;
            left: 50%;
            border-bottom-color: rgba(0, 0, 0, 0.8);
            margin-left: -3px;
            margin-top: -9px;
        }

        .tip-bottom:after {
            top: 100%;
            left: 50%;
            margin-left: -6px;
            margin-top: 3px;
        }

        .tip-bottom:hover:before {
            margin-top: -3px;
        }

        .tip-bottom:hover:after {
            margin-top: 9px;
        }

        /*right*/
        .tip-right:before {
            top: 50%;
            left: 100%;
            border-right-color: rgba(0, 0, 0, 0.8);
            margin-left: -9px;
            margin-top: -3px;
        }

        .tip-right:after {
            top: 50%;
            left: 100%;
            margin-left: 3px;
            margin-top: -6px;
        }

        .tip-right:hover:before {
            margin-left: -3px;
        }

        .tip-right:hover:after {
            margin-left: 9px;
        }

        /*left*/
        .tip-left:before {
            top: 50%;
            left: 0%;
            border-left-color: rgba(0, 0, 0, 0.8);
            margin-left: 0px;
            margin-top: -3px;
        }

        .tip-left:after {
            top: 50%;
            right: 100%;
            margin-right: 0px;
            margin-top: -6px;
        }

        .tip-left:hover:before {
            margin-left: -6px;
        }

        .tip-left:hover:after {
            margin-right: 6px;
        }
    </style>
</head>
<body>
<p>
    <button class="tip tip-top" data-tip="我是上边提示">上边提示</button>
</p>
<p>
    <button class="tip tip-bottom" data-tip="我是下边提示">下边提示</button>
</p>
<p>
    <button class="tip tip-right" data-tip="我是右边提示">右边提示</button>
</p>
<p>
    <button class="tip tip-left" data-tip="我是左边提示">左边提示</button>
</p>
</body>
</html>