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

您正在使用 border 属性的简写形式，根据 W3c，Border 简写属性有 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