CSS :悬停以突出显示多个 td 单元格

Question

在 table 中，将鼠标悬停在一个 td 单元格上时，我想突出显示同一行中的多个 td 单元格。

我目前的方法是在每个 td 上使用类，如下所示：

        <tr>
            <td>v1_a</td>
            <td class='c1'>v1_b1</td>
            <td class='c1'>v1_b2</td>
            <td class='c2'>v1_c1</td>
            <td class='c2'>v1_c2</td>
        </tr>

并且 CSS 是这样的：

tbody td.c1:hover,
tbody td.c1:hover ~ .c1,
tbody td.c2:hover,
tbody td.c2:hover ~ .c2 {
    background-color: #CCffff;
}

然后我可以部分实现我想要的：JSFiddle

然而，这并不是我想要的。当我将鼠标悬停在 col_b1 上时，它会突出显示 col_b1 和 col_b2，但当我将鼠标悬停在 col_b2 上时，它不会突出显示。每当指针位于其中一个单元格上时，我想突出显示这两列。

是否有理想的仅使用 CSS 的简单解决方案？

Answer 1

如果要突出显示整行，请将鼠标悬停在任何单元格上。然后写

tr:hover {background-color: #f5f5f5;}

在 css 文件中。如果您不使用 css 文件并在 html 文件中写入所有样式，则在 head

中写入

<style>
   tr:hover {background-color: #f5f5f5;}
</style>

希望对您有所帮助。

Answer 2

请使用javascript实现。

我添加了一个属性作为同组元素标识以使其更具可持续性。

$('.highlight').on('mouseover', function() {
  $('.highlight').removeClass('hover');
  $('.highlight[data-cell="'+$(this).data('cell')+'"]').addClass('hover');
});

td {
  border: 1px solid;
}
.hover {
  background-color: #ff0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>v1_a</td>
    <td class="highlight" data-cell="c1">c1</td>
    <td class="highlight" data-cell="c1">c1</td>
    <td class="highlight" data-cell="c2">c2</td>
    <td class="highlight" data-cell="c2">c2</td>
  </tr>
  <tr>
    <td>v1_a</td>
    <td class="highlight" data-cell="c3">c3</td>
    <td class="highlight" data-cell="c3">c3</td>
    <td class="highlight" data-cell="c4">c4</td>
    <td class="highlight" data-cell="c4">c4</td>
  </tr>
</table>

CSS :悬停以突出显示多个 td 单元格

CSS :hover for highliting multiple td cells

html

css

hover