在悬停 table 中的单元格时突出显示特定单元格

Question

我有以下 table（真正的 table 更大，在 WordPress 中实现）：

<table id="tablepress-71" class="tablepress tablepress-id-71">
       <tr class="row-1">
         <td class="column-1"><span><a href="#">Item 1</a></span></td>
         <td class="column-2"><span><a href="#">Item 2</a></span></td>
      </tr>
      <tr class="row-2">
         <td class="column-1"><span><a href="#">Item 3</a></span></td>
         <td class="column-2"><span><a href="#">Item 4</a></span></td>
      </tr>
  </table>

我需要在悬停在特定单元格上时突出显示（背景色）单元格子集。例如，将鼠标悬停在 .row-1 .column-2 单元格上时，我希望突出显示以下单元格： .row-1 .column-2 和 .row-2 .column-2

有 8 个单元格接受悬停，悬停时每个单元格突出显示 table（无规则，仅指定列表）上的一组特定单元格。

可以使用CSSand/orJS.

Answer 1

你在找这个吗？如果不是你能澄清一下吗？

向所有 column2 单元格添加 class 个活动：

$('td.row-1 .column-2').hover(function(){
    $('.column-2').toggleClass('active');
});

或：

向特定 column2 单元格添加 class 个活动：

$('.column-2').hover(function(){
    $('this').toggleClass('active');
});

Answer 2

我假设 "no rules, just a specified list" 你的意思是每个单元格都会有一个列表，其中包含你希望在第一个单元格悬停时突出显示的其他特定单元格。但是从代码的角度来看，这些单元格有些随意。（即不受任何规则或逻辑约束）。

如果该假设是正确的，并且您愿意使用 jquery，您可以对 javascript 执行类似以下操作（假设您有一个名为 class "highlight" 在你的 CSS 中）：

$('.row-1 .column-2').mouseenter(function(){
  $('.row-1 .column-2').addClass('highlight');
  $('.row-2 .column-2').addClass('highlight');
}).mouseleave(function() {
  $('.row-1 .column-2').removeClass('highlight');
  $('.row-2 .column-2').removeClass('highlight');
});

它会有点冗长，因为您必须准确地写出您希望为悬停的每个单元格突出显示的单元格。但是，如果没有规则来管理行为，那是我想到的最佳方法。

祝你好运！

这是一个工作示例：code pen

在悬停 table 中的单元格时突出显示特定单元格

Highlighting specific cells on hover of a cell in a table

html

javascript

css

html-table

hover