使用 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;
}