Question

我有下表（真正的表更大，在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个单元格可以接受悬停，每个单元格在悬停时突出显示表格中的特定单元格组（无规则，只有指定的列表）。

可以使用CSS和/或JS。

Answer 1

你正在寻找这个吗？如果没有，你能否澄清。

向所有column2单元格添加一个active类：

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

或：

将一类活动添加到特定的column2单元格：

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

Answer 2

我假设“没有规则，只是一个指定的列表”，你的意思是每个单元格都会有一个其他特定单元格的列表，当第一个单元格悬停时，它会突出显示。但是从代码的角度来看，这些单元格会有点武断。（即，不受任何规则或逻辑的约束）。

如果这个假设是正确的，并且如果你愿意使用jquery，你可以为javascript执行类似下面的操作（假设你的CSS中有一个名为“highlight”的类）：

$('.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

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

2 个答案: