I have quite a big table grouped by a `data` attribute which looks like this:

```
<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>

```

I don't know in advance the value of the possible groups (could be more than 50 groups). They are generated dynamically. 

Right now I am using jQuery to create the hover highlight effect but is a bit slow. 
I was wondering if there's any way to do it with CSS.

This is what I'm using right now:

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

```

Working demo: <http://jsfiddle.net/MW69S/>