css实现了hover显示title的效果

发表于 | 更新于: | 分类于 | 阅读次数:
字数统计: 78 字 | 阅读时长 ≈ 1 分钟

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<div data-title="hello, world">hello...</div>

<style>
div {
    position: relative;
}
div:hover::after {
    content: attr(data-title);    //取到data-title属性的值
    display: inline-block;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    position: absolute;
    top: -50px;
    left: -30px;
}
</style>

效果图

018

参考

https://www.cnblogs.com/horanly/p/6101283.html