CODEWITHSUNDEEP
csscss-transitions
LiverpoolsNumber9
LiverpoolsNumber9

Reputation: 2394

Table row background-color transition not working

Given this 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>

And this CSS:

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

I would expect the row with the class latest to start with a background-color of #ccc, delay for 2 seconds and then slowly fade to #fff over 4 seconds.

However, this fiddle - http://jsfiddle.net/6e2uao7v/5/ - would suggest otherwise. Am I misunderstanding?

Upvotes: 2

Views: 3364

Answers (1)

Covix
Covix

Reputation: 135

You have to set the transition on the first css rule applied to the element, like

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

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

This example css will show the transition when you hover the row with the mouse.

Upvotes: 3

Related Questions