[英]CSS mouse hover behaviour
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 这是有问题的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;
}
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.
我在Firefox上进行了测试,但是在Chrome中其行为却完全相同。 That problem occures only in these rows.
该问题仅在这些行中发生。 Here you can test it: http://jsfiddle.net/47kZZ/16/
在这里您可以对其进行测试: 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?
在IE中看起来如何?
You are using the Short Form of border property and as per W3c, Border short hand property takes 3 properties. 您正在使用边框的缩写形式属性,并且根据W3c,边框的短手属性具有3个属性。 You have one property missing and hence the error.
您缺少一个属性,因此出错。
http://www.w3.org/TR/css3-background/#the-border-shorthands 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.