在一组行中悬停突出显示效果

我有一张相当大的桌子，由data属性看起来像这样：

<table>
    <tr data-group="666"><td></td></tr>
    <tr data-group="666"><td></td></tr>

    <tr data-group="2"><td></td></tr>
    <tr data-group="2"><td></td></tr>

    <tr data-group="XXXX"><td></td></tr>
    <tr data-group="XXXX"><td></td></tr>
</table>

我事先并不知道可能的组的值（可能超过 50 个组）。它们是动态生成的。

现在我正在使用 jQuery 来创建悬停突出显示效果，但速度有点慢。 我想知道是否有任何方法可以用 CSS 来做到这一点。

这就是我现在正在使用的：

$('tr').live('hover', function() {
        $('tr[data-group="'+$(this).data('group')+ '"]').toggleClass('hover');
});

工作演示：http://jsfiddle.net/MW69S/ http://jsfiddle.net/MW69S/

为你分叉了一个工作演示 http://jsfiddle.net/barney/c7GYr/。您可以通过多个来实现这一点（只要行始终分组）tbody元素。

<table>
    <tbody data-group="666">
        <tr><td>aaaa</td></tr>
        <tr><td>bbbbb</td></tr>
    </tbody>
    <tbody data-group="2">
        <tr><td>aaaa</td></tr>
        <tr><td>bbbb</td></tr>
    </tbody>
    <tbody data-group="XXXX">
        <tr><td>aaaa</td></tr>
        <tr><td>bbbb</td></tr>
    </tbody>
</table>

然后您可以使用更改后的 CSS 规则：

tbody:hover{
    background:#ff00ff;
}