将鼠标悬停在表格的 x 列上并填充 x 元素

Posted 2023-05-09

【中文标题】将鼠标悬停在表格的 x 列上并填充 x 元素

【英文标题】：Hover on the x column of the table and fill x element

【发布时间】：2013-01-12 11:33:30

【问题描述】：

我有一个表格和一个带有矩形的 svg 图表。

我想将鼠标悬停在表格的第一列并填充图表的第一个矩形，然后 当您将鼠标悬停在表格的第二列时，填充第二个矩形。

这是重复的 2

这是有效的：

    $('tr td:nth-child(1)').mouseover(function()
      $('rect:nth-of-type(1)').css("fill", "black" );
    );

    $('tr td:nth-child(2)').mouseover(function()  
      $('rect:nth-of-type(2)').css("fill", "black" );
    );

但是我需要重复自己 24 次。我试过这个解决方案：

$('tr td:lt(24)').hover(
  function()
    var index = $(this).index();
    $('rect').eq( index ).css("fill", "black" );
    ,
  function()
    var index = $(this).index();
    $('rect').eq( index ).css('fill', 'steelblue');
);

但现在，当您将鼠标悬停在表格上时，只会选择表格第一行的 td。

【问题讨论】：

你试过tr:lt(24) td吗？

谢谢你是正确的分析器:)

【参考方案1】：

使用tr:lt(24) td 代替td:lt(24)。您想要少于第 24 个行，而不是第 24 列。