使用hover和attr()定制悬浮提示
# attr()
注意
目前只支持content属性
<html>
<p class="demo-attr" data-title="张三"></p>
</html>
<style>
.demo-attr{
position: relative;
padding: 2px;
border: 2px solid #99c2ec;
border-radius: 50%;
width: 24px;
height: 24px;
background-clip: content-box;
cursor: pointer;
transition: all 300ms;
background-color:#99c2ec;
margin: 30px;
}
.demo-attr::before,
.demo-attr::after {
position: absolute;
left: 50%;
bottom: 100%;
opacity: 0;
transform: translate3d(0, -30px, 0);
transition: all 300ms;
}
.demo-attr::before {
margin: 0 0 12px -35px;
border-radius: 5px;
width: 70px;
height: 30px;
background-color: rgba(0,0,0, .5);
line-height: 30px;
text-align: center;
color: #fff;
content: attr(data-title);
}
.demo-attr::after {
margin-left: -6px;
border: 6px solid transparent;
border-top-color: rgba(0,0,0, .5);
width: 0;
height: 0;
content: "";
}
.demo-attr:hover::before,.demo-attr:hover::after {
opacity: 1;
transform: translate3d(0, 0, 0);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
编辑 (opens new window)
上次更新: 2023/03/08, 02:53:55