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

时间:2015-08-11 16:13:26

标签: javascript html css html-table hover

我有下表(真正的表更大,在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。

2 个答案:

答案 0 :(得分:1)

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

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

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

或:

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

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

答案 1 :(得分:0)

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

如果这个假设是正确的,并且如果你愿意使用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