根据列（HTML / CSS）独立突出显示表格单元格/行

Question

我正在尝试使用Vue.js根据动态表中单元格所在的列来实现不同的CSS样式。

在最简单的形式下，我试图使用CSS在第1列中鼠标悬停的单个单元格周围放置边框。但是，在第2列中，我希望整个行（第1列和第1列）周围都有边框2）悬停。

由于每列都有不同的CSS类实现，所以我不确定如何在同一行的单元格之间强制使用不同的样式。

.column1 :hover {
	border: 1px solid white;
}

.column2 :hover {
	/* Apply same border defined in .column1 :hover, but across the whole row of the table */
}

<table>
  <tr v-for="index in list">
    <td class="column1">BORDER ONLY AROUND THIS CELL ON HOVER</td>
    <td class="column2">BORDER AROUND WHOLE ROW ON HOVER OF THIS CELL</td>
  </tr>
</table>

[EDIT]：从<tr>设置td:hover元素的样式，但仅在特定列中的<td>元素上设置样式。