气泡

作者: w_小伍 | 来源:发表于2020-06-19 17:53 被阅读0次
    image.png
    <div class="box tip-a">
      <a href="javascript:;" data-tooltip="提示提示提示">点击</a>
    </div>
    
    .tip-a a {
          border-bottom:1px solid #bbb;
          color:#666;
          display:block;
          position:relative;
          text-decoration:none;
          width: 100px;
          height: 32px;
          text-align: center;
          line-height: 32px;
          background-color: purple;
          color: #ffffff;
        }
        .tip-a a:hover,
        .tip-a a:focus {
          color:#36c;}
        .tip-a a:active {
          top:1px;
        }
        /* Tooltip styling */
        .tip-a a[data-tooltip]:after {
          border-top: 8px solid #222;
          border-top: 8px solid hsla(0,0%,0%,.85);
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          content: "";
          display: none;
          height: 0;
          width: 0;
          left: 25%;
          position: absolute;
        }
        .tip-a a[data-tooltip]:before {
          background: #222;
          background: hsla(0,0%,0%,.85);
          color: #f6f6f6;
          content: attr(data-tooltip);
          display: none;
          font-family: sans-serif;
          font-size: 14px;
          height: 32px;
          left: 0;
          line-height: 32px;
          padding: 0 15px;
          position: absolute;
          text-shadow: 0 1px 1px hsla(0,0%,0%,1);
          white-space: nowrap;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          -o-border-radius: 5px;
          border-radius: 5px;
        }
        .tip-a a[data-tooltip]:hover:after {
          display: block;
          top: -9px;
        }
        .tip-a a[data-tooltip]:hover:before {
          display: block;
          top: -41px;
        }
        .tip-a a[data-tooltip]:active:after {
          top: -10px;
        }
        .tip-a a[data-tooltip]:active:before {
          top: -42px;
        }
    

    相关文章

      网友评论

          本文标题:气泡

          本文链接:https://www.haomeiwen.com/subject/mmrbxktx.html