最近学到一种新的弹注写法，适用于iBooks、NeatReader、Koodo Reader

Moss66

ios上只有旧版的多看能用弹注功能，更新了新版就回退不了，ibooks主流的注释都是跳转型的，有点影吶阅读体验，然后最近冲浪的时候发现了一种新的弹注写法，结果在意外适配ibooks。

1. ^{<span class="reader_footer_note" data-wr-footernote="这里填入需要弹注的内容"></span>}

复制代码

在css文件里写入以下代码

1. span.reader_footer_note {
   
2.     position: relative;
   
3.     display: inline-block;
   
4.     width: 1em;
   
5.     height: 1em;
   
6.     vertical-align: sub;
   
7.     border-radius: 50%;
   
8.     cursor: pointer;
   
9.     margin: 0 3px;
   
10.     background-image: url("../images/note.png");
    
11.     background-size: 100%;
    
12.     background-repeat: no-repeat;
    
13. }
    
14. 
    
15. span.reader_footer_note:hover:after {
    
16.     position: fixed;
    
17.     content: attr(data-wr-footernote);
    
18.     left: 0;
    
19.     bottom: 0;
    
20.     margin: 1em;
    
21.     background: black;
    
22.     border-radius: 0.25em;
    
23.     color: white;
    
24.     padding: 0.5em;
    
25.     font-size: 1em;
    
26.     font-family: "汉仪楷体", sans-serif;
    
27.     z-index: 10;
    
28. }

复制代码

兵河之心

尾注，不用修改么？能放一本用此方法写的弹注测试书上来么？

兵河之心

这写法，还能反向兼容多看么？