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

Question

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

我现在正在编写一个简单的视频播放器，它提供了类似字幕的内容（因为我以自定义二进制格式接收它们）。我想强调这些字幕的一些部分（现在正在播放）。在我有几个span之前，我动态地将active类设置背景添加到黄色。但与内置的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本身，而不是仅仅将某些类设置为某些元素）

我现在以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;
}