将光标悬停在一组行中 [英] Hover highlight effect in a group of rows

问题描述

我有一个很大的表，按data属性分组，如下所示:

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>

我事先不知道可能的组的值(可能超过50个组).它们是动态生成的.

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

现在我正在使用jQuery创建悬停突出显示效果，但是有点慢. 我想知道CSS是否有任何方法.

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');
});

正在运行的演示: http://jsfiddle.net/MW69S/

推荐答案

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

Unfortunately, there's no way to highlight other rows natively through CSS based on hovering over one row with that attribute selector. You would need to involve some sort of javascript in order to do so.

但是，我建议通过将调用更改为以下内容来提高现有jQuery的性能:

However, I would recommend increasing the performance of your existing jQuery by changing the call to something like this:

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

这将加快整个过程，因为您将增加选择器的特异性，从而减少了jQuery的查找范围，从而找到了所需的元素.

That should speed up the whole process, as you're increasing specificity of the selector, thus giving jQuery less to dig through in order to find the elements which you're looking for.

这篇关于将光标悬停在一组行中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！