最近学到一种新的弹注写法,适用于iBooks、NeatReader、Koodo Reader
ios上只有旧版的多看能用弹注功能,更新了新版就回退不了,ibooks主流的注释都是跳转型的,有点影吶阅读体验,然后最近冲浪的时候发现了一种新的弹注写法,结果在意外适配ibooks。
<sup><span class="reader_footer_note" data-wr-footernote="这里填入需要弹注的内容"></span></sup>在css文件里写入以下代码
span.reader_footer_note {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: sub;
border-radius: 50%;
cursor: pointer;
margin: 0 3px;
background-image: url("../images/note.png");
background-size: 100%;
background-repeat: no-repeat;
}
span.reader_footer_note:hover:after {
position: fixed;
content: attr(data-wr-footernote);
left: 0;
bottom: 0;
margin: 1em;
background: black;
border-radius: 0.25em;
color: white;
padding: 0.5em;
font-size: 1em;
font-family: "汉仪楷体", sans-serif;
z-index: 10;
}
尾注,不用修改么?能放一本用此方法写的弹注测试书上来么? 这写法,还能反向兼容多看么?
页:
[1]