CSS mouse hover behaviour

Question

I have a table and want to highlight each line if cursor move over it. So text color and background color should change.

Here is a minimized example:

<table>
    <tr class="line_0">
       <td>1</td>
       <td>2</td>
       <td>3</td>
       <td>4</td>
       <td>5</td>
    </tr>   
    <tr class="line_1">
       <td>1</td>
       <td>2</td>
       <td>3</td>
       <td>4</td>
       <td>5</td>
    </tr>   
    <tr class="line_0">
       <td>1</td>
       <td>2</td>
       <td>3</td>
       <td>4</td>
       <td>5</td>
    </tr>   
    <tr class="line_1">
       <td>1</td>
       <td>2</td>
       <td>3</td>
       <td>4</td>
       <td>5</td>
    </tr>   
</table>

and here is the css with the problem

table {
   border-collapse: collapse;
}

td {    
   border: 2px dotted;
}
table .line_0 td {
   background: #FFF;
}
table .line_1 td {
   background: #EEE;
}
table .line_0:hover td,
table .line_1:hover td {
   color: #F00;
}

If you move your mouse over the second row and then back to the first, the border of second row will be still red. I tested under Firefox, but in Chrome its quite same behaviour. That problem occures only in these rows. Here you can test it: http://jsfiddle.net/47kZZ/16/

After a lot playing around, I find a temporary fix by adding a color tag, which must necessarily be different, so nearly black.

table .line_0 td {
   color: #010100;
   background: #FFF;
}
table .line_1 td {
    color: #010000;
    background: #EEE;
}

So is it a common browser problem? Have you got a better fix? How does it look in IE?

Answer 1

You are using the Short Form of border property and as per W3c, Border short hand property takes 3 properties. You have one property missing and hence the error.

http://www.w3.org/TR/css3-background/#the-border-shorthands

4.4. Border Shorthand Properties
Name:   border-top, border-right, border-bottom, border-left
Value:  <line-width> || <line-style> || <color>

jsFiddle