用CSS实现tip美化效果 - 陌路人博客

用CSS实现tip美化效果-陌路人博客-第1张图片陌路人

陌路人博客(molure.cn)
用心传递快乐,初心不变。

用CSS实现tip美化效果

本教程主要是利用元素的::before和::after 来实现纯css的tip效果,利用了伪元素的content中attr()方法中传入自定义标签 data- 来完成。

需要在data- xxx 属性 中定义内容,可动态设置,这样每次hover时,就会出现提示信息。

HTML代码:

<div class="box">
    <span data-tip="Hi word!">
        hellow  word!
    </span>
</div>
CSS代码:

.box {
    margin-top: 50px;
}

.box span {
    position: relative;
    cursor: pointer;
}

.box span:hover::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 30px;
    width: 0;
    height: 0;
    border-top: 5px solid red;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.box span:hover::before {
    content: attr(data-tip);
    background-color: red;
    color: #FFFFFF;
    padding: 4px;
    text-align: center;
    position: absolute;
    top: -39px;
    left: 20px;
    border-radius: 5px;
}


×

感谢您的支持,我们会一直保持!

用CSS实现tip美化效果-陌路人博客- 第5张图片
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:陌路人博客 » 用CSS实现tip美化效果
标签: 教程 代码

发表评论

表情

网友评论(0)