mousehover - CSS mouse hover behaviour -

i have table , want highlight each line if cursor move on it. text color , background color should change.

here 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 css 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 move mouse on second row , first, border of second row still red. tested under firefox, in chrome quite same behaviour. problem occures in these rows. here can test it: http://jsfiddle.net/47kzz/16/

after lot playing around, find temporary fix adding color tag, must different, black.

table .line_0 td {    color: #010100;    background: #fff; } table .line_1 td {     color: #010000;     background: #eee; } 

so common browser problem? have got better fix? how in ie?

you using short form of border property , per w3c, border short hand property takes 3 properties. have 1 property missing , hence 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