css - 仅使用 css 悬停行后，如何使行的最后一个 td 突出显示？

Question

我想在鼠标悬停时突出显示该行的最后一个单元格。是否可以仅使用 css 来做到这一点。这是工作链接。

http://jsbin.com/isukemih/2/edit

我尝试了以下方法

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

tr:last-child:hover {
  background-color: #f00;
}

Answer 1

使用它来将悬停行的最后一个单元格的背景颜色设置为红色:

tr:hover td:last-child {
  background-color: #f00;
}

Demonstration