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

Question

我有一个很大的表,按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/

Answer 1

为您分配了一个工作演示.您可以使用多个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;
}

Answer 2

不幸的是，无法通过使用该属性选择器将鼠标悬停在一行上来通过 CSS 原生突出显示其他行。为此，您需要使用某种 JavaScript。

不过，我建议通过将调用更改为如下所示来提高现有 jQuery 的性能：

$('tr[data-group]').on('hover', function() {
  var t = $(this);
  t.siblings('[data-group='+t.attr('data-group')+']').toggleClass('hover');
});

这应该会加快整个过程，因为您增加了选择器的特异性，从而使 jQuery 无需深入挖掘即可找到您正在寻找的元素。