表行背景颜色过渡不起作用

Question

鉴于此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>

这个CSS：

tr{
    background-color: #ccc;
}
tr.not-latest{
    background-color: #fff;
}
tr.latest{
    background-color: #fff;
    transition: background-color 4s;
    transition-delay: 2s;    
}

我希望期望类latest的行以#ccc的背景颜色开始，延迟2秒然后慢慢淡出{{1}超过4秒。

但是，这个小提琴 - http://jsfiddle.net/6e2uao7v/5/ - 会暗示其他情况。我误解了吗？

Answer 1

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

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

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

此示例css将显示使用鼠标悬停行时的转换。