javascript - 如何在悬停该行时仅突出显示表格中该行的几个单元格？

Question

我正在开发我的 Web 应用程序，我有一个 HTML 表格，我想在用鼠标悬停该行时突出显示该行的某些单元格。我不想突出显示该行的所有单元格，但我也不想突出显示单个单元格。

.line th[target=yes]:hover{
    background-color: #111;
}

它逐个单元地突出显示...

.cell:hover{
    background-color: #111;
}

它还逐个单元地突出显示...

.line:hover{
    background-color: #111;
}

它突出了整行...

<tr class="line">
   <th class="round" target='yes'></th>
   <th class="round" target='yes'>OF</th>
   <th class="round cell" target='yes'>Start Date</th>
   <th class="round cell" target='yes'>End date</th>
   <th class="round cell" target='yes'>Status</th>
</tr>

我只想突出显示“单元格”类的单元格。

Answer 1

你真的只需要按字面翻译你想要的:选择所有 .cell 元素，它们是悬停的 .line 的后代:

.line:hover .cell { /* … */ }