HTML 按钮提示框


<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
       .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;
        }
        /*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;
        }
    style>
head>
<body>
<p>
    

代码示例:
HTML 按钮提示框_第1张图片

你可能感兴趣的:(HTML,按钮提示)