css content 的 attr 用法 (实现悬浮提示)
css content 的 attr 用法 (实现悬浮提示)

css content 的attr 实现 鼠标悬浮 显示 悬浮提示,

content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

html:

<div>

    <span data-tooltip="hello world">Hover Me!!!</span>

</div>

css:

    body{
        padding:100px;
    }
    span{
        position:relative;
        display:inline-block;
    }
    span:hover{
        cursor:pointer;
    }
    span:hover:before{
        content:attr(data-tooltip);
        background:#d9444a;
        color:#fff;
        padding:.8em 1em;
        position:absolute;
        left:100%;
        top:-70%;
        margin-left:14px;
        white-spack:pre;
    }
    span:hover:after{
        content:" ";
        position:absolute;
        left:80%;
        width:0;
        height:0;
        border-right:8px solid #d9444a;
        border-top:8px solid transpatrnt;
        border-bottom:8px solid transparent;
    }
    

data- 为自定义属性,如上 自定义 提示 data-tooltip ="hello world",

配合 before ,after 使用 content 的attr 调用 自定义提示,

content: attr(data-tooltip);

2018-12-25 236

 

评论

热门文章

Instagram

Lorem ipsum ex vix illud nonummy, novum tation et his. At vix scripta patrioque scribentur, at pro