文章/答案/技术大牛

发布

社区首页 >问答首页 >一组行中的悬停高亮效果

问一组行中的悬停高亮效果
EN

Stack Overflow用户

提问于 2013-03-08 22:25:39

回答 2查看 2.2K关注 0票数 5

我有一个很大的表，它由一个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/

jquery

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-03-08 22:35:22

不幸的是，没有办法通过CSS在属性选择器将鼠标悬停在一行上来突出显示其他行。为了做到这一点，您需要使用某种类型的javascript。

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

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

这应该会加快整个过程，因为您增加了选择器的特异性，从而减少了jQuery为了找到您正在寻找的元素而需要挖掘的内容。

票数 2

Stack Overflow用户

发布于 2013-03-08 22:39:37

Forked a working demo for you。您可以使用多个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;
}

票数 8

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15296211

复制

相似问题

问一组行中的悬停高亮效果
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问一组行中的悬停高亮效果EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问一组行中的悬停高亮效果
EN