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

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秒然后在 4 秒内慢慢淡入 #fff。

但是，这个 fiddle - http://jsfiddle.net/6e2uao7v/5/ - 否则会建议。我是不是误会了？

Answer 1

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

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

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

此示例 css 将在您将鼠标悬停在行上时显示过渡。