Moss66 发表于 2024-4-28 18:27

最近学到一种新的弹注写法,适用于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;
}

兵河之心 发表于 2024-5-13 11:14

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

兵河之心 发表于 2024-5-13 11:16

这写法,还能反向兼容多看么?
页: [1]
查看完整版本: 最近学到一种新的弹注写法,适用于iBooks、NeatReader、Koodo Reader