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
/*右邊箭頭氣泡框*/
.cmp_arrow_right::after{
content:"請輸入文字";
color:black; /*字的顏色*/
font-family:"微軟正黑體"; /*字體*/
font-size:small;
padding:7px 0 0 0; /*內距*/
text-align:center; /*把字置中*/
background-image: url(https://images.plurk.com/6TTNIUvPTrHxTnqefO0Kew.png); /*背景氣泡框的圖*/
width:70px; height:45px; /*大小*/
background-size:70px 45px; /*圖的大小*/
background-repeat: no-repeat;
position: absolute;
margin-top: -50px; left:-50px; /*位置*/
}



/*左邊箭頭氣泡框*/
.cmp_arrow_left::after{
content:"請輸入文字";
color:black; /*字的顏色*/
font-family:"微軟正黑體"; /*字體*/
font-size:small;
padding:7px 0 0 0; /*內距*/
text-align:center; /*把字置中*/
background-image: url(https://images.plurk.com/7mEPhfZ7gf4maoH6lS3GIt.png); /*背景氣泡框的圖*/
width:70px; height:45px; /*大小*/
background-size:70px 45px; /*圖的大小*/
background-repeat: no-repeat;
position: absolute;
margin-top: -50px; right:-50px; /*位置*/
}

/*讓氣泡框在游標沒放上去時變成透明*/
.cmp_arrow_right:not(:hover)::after,.cmp_arrow_left:not(:hover)::after{opacity:0;}