CSS鼠标悬停行为

Question

我有一张桌子，如果光标移过它，想要突出显示每一行。 所以文字颜色和背景颜色应该改变。

这是一个最小化的例子：

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

这是带问题的CSS

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;
}

如果将鼠标移到第二行然后再移回第一行，则第二行的边框仍为红色。我在Firefox下测试过，但在Chrome中它的行为完全相同。该问题仅发生在这些行中。在这里你可以测试它：http://jsfiddle.net/47kZZ/16/

经过大量的游戏后，我通过添加颜色标签找到了一个临时修复，颜色标签必须是不同的，所以几乎是黑色。

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

这是常见的浏览器问题吗？你有更好的解决方案吗？它在IE中看起来如何？

Answer 1

您正在使用Short Form of border属性，根据W3c，Border short hand属性有3个属性。您缺少一个属性，因此错误。

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