Css 表行背景色转换不工作

鉴于此HTML：

<table style="width: 100%">
    <tr class='not-latest'><td>Test</td></tr>    
    <tr class='latest'><td>Test</td></tr>    
    <tr class='not-latest'><td>Test</td></tr>    
    <tr class='not-latest'><td>Test</td></tr>    
    <tr class='not-latest'><td>Test</td></tr>    
    <tr class='not-latest'><td>Test</td></tr>    
    <tr class='not-latest'><td>Test</td></tr>    
</table>

我希望类为

最新的

的行以

#ccc

的背景色开始，延迟2秒，然后在4秒内慢慢淡入

#fff

---

然而，这把小提琴——却暗示着另一种情况。我误解了吗？

您必须在应用于元素的第一个css规则上设置转换，如

tr{
    background-color: #ccc;
    transition: background-color 1s;
}

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

---

此示例css将在鼠标悬停行时显示转换。

如何触发此转换？据我所知，如果你只想用CSS实现这一点，你需要触发它，比如“悬停”。所以你的小提琴可以，所以这是我的误解。非常感谢。

tr{
    background-color: #ccc;
    transition: background-color 1s;
}

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