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>

我只想强调“ cell”类的单元格。

Answer 1

您实际上只需要按字面意思翻译：选择所有.cell元素，它们是悬停的.line的后代：

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

Answer 2

您可以通过通过其父级选择.cell类来做到这一点，方法如下：

 My Fixture
test 2 body.scrollHeight 1762
 √ test 2

 My Fixture
test 1 body.scrollHeight 932
 √ test 1


 2 passed (0s)

Answer 3

要使其正常工作（在此处和在您的页面中），您需要在其周围包装一张桌子。

th本身就是伏都教魔法。

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

<table>
  <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>
</table>

Answer 4

.line .cell:hover {
  text-decoration: underline;
}

<table>
  <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>
</table>

将鼠标悬停在一行中时，如何只突出显示一行中的几个单元格？

4 个答案: