使用 css 模拟 mark 标记以频繁更改选择

Question

我发现 a question 应该回答我的问题，但不是因为有人决定 it's breaking semantic。但我认为有些情况下是必要的。

我现在正在编写一个简单的视频播放器，它提供了字幕之类的东西（因为我收到的是自定义二进制格式的东西）。我想突出显示这些字幕的某些部分（正在播放）。在我有几个 span 之前，我动态添加了 active class 设置背景为黄色。但与内置 mark 标签相比，它真的很难看。

问题是我应该每秒更新几次字幕，如此频繁地修改 DOM 会产生严重的 UI 延迟。 Css background 方法消耗零资源，但看起来很丑（单词之间的空格未突出显示）。

解决这个问题的最佳方法是什么？

我当前的标记是基于此二进制字幕信息生成的：

<p>
    <a href="javascript:void(0)" data-s2t-time="3.11" onclick="$('#jquery_jplayer_1').jPlayer('play', 3.11)" class="active">You</a>
    <a href="javascript:void(0)" data-s2t-time="3.36" onclick="$('#jquery_jplayer_1').jPlayer('play', 3.36)" class="active">can</a>
    <a href="javascript:void(0)" data-s2t-time="3.81" onclick="$('#jquery_jplayer_1').jPlayer('play', 3.81)" class="active">always</a>
    <a href="javascript:void(0)" data-s2t-time="4.01" onclick="$('#jquery_jplayer_1').jPlayer('play', 4.01)">add</a>
    <a href="javascript:void(0)" data-s2t-time="4.26" onclick="$('#jquery_jplayer_1').jPlayer('play', 4.26)">some</a>
    <a href="javascript:void(0)" data-s2t-time="5.11" onclick="$('#jquery_jplayer_1').jPlayer('play', 5.11)">non-breaking</a>
    <a href="javascript:void(0)" data-s2t-time="5.22" onclick="$('#jquery_jplayer_1').jPlayer('play', 5.22)">spaces</a>
    <a href="javascript:void(0)" data-s2t-time="5.6" onclick="$('#jquery_jplayer_1').jPlayer('play', 5.6)">before</a>
<p>

改变文字背景：

.active[data-s2t-time] {
    background-color: #FFFF00;
}

但是看起来不太好：

如果我使用 mark 看起来不错：

但我得到以下标记：

<p>
    <mark>
        <a href="javascript:void(0)" data-s2t-time="3.11" onclick="$('#jquery_jplayer_1').jPlayer('play', 3.11)">You</a>
        <a href="javascript:void(0)" data-s2t-time="3.36" onclick="$('#jquery_jplayer_1').jPlayer('play', 3.36)">can</a>
        <a href="javascript:void(0)" data-s2t-time="3.81" onclick="$('#jquery_jplayer_1').jPlayer('play', 3.81)">always</a>
    </mark>
    <a href="javascript:void(0)" data-s2t-time="4.01" onclick="$('#jquery_jplayer_1').jPlayer('play', 4.01)">add</a>
    <a href="javascript:void(0)" data-s2t-time="4.26" onclick="$('#jquery_jplayer_1').jPlayer('play', 4.26)">some</a>
    <a href="javascript:void(0)" data-s2t-time="5.11" onclick="$('#jquery_jplayer_1').jPlayer('play', 5.11)">non-breaking</a>
    <a href="javascript:void(0)" data-s2t-time="5.22" onclick="$('#jquery_jplayer_1').jPlayer('play', 5.22)">spaces</a>
    <a href="javascript:void(0)" data-s2t-time="5.6" onclick="$('#jquery_jplayer_1').jPlayer('play', 5.6)">before</a>
<p>

很难修改（因为我正在更新 DOM 本身，而不是仅仅为某些元素设置一些 class）

我现在以以下内容结束css：

.active[data-s2t-time] {
    background-color: #FFFF00;
    margin: -2px;
    padding: 2px;
}

但仍在寻找更好的东西

Answer 1

使用以下 CSS 解决：

a.active[data-s2t-time], 
a.active[data-s2t-time]:hover, 
a.active[data-s2t-time]:focus {
    background-color: #019be3;
    margin: -2px;
    padding: 2px;
    color: white;
}

使用 css 模拟 mark 标记以频繁更改选择

Emulate mark tag with css for frequently changing selection

html

css

selection

使用 css 模拟 mark 标记以频繁​​更改选择

Emulate mark tag with css for frequently changing selection

html

css

selection

使用 css 模拟 mark 标记以频繁更改选择