我的要求:
当鼠标悬停在 tr
上时,tr
将具有线性渐变背景,而不仅仅是纯色背景。
tr
中的示例 td
:
A | B | C | B | A
在这里,A变暗,C变亮
JSFIDDLE:
https://jsfiddle.net/g7o84j43/
我尝试过的代码:
HTML:
<table border="1px" width="100%" cellpadding="0px" cellspacing="0px">
<tr style="text-align:center">
<td>A</td>
<td>B</td>
<td>C</td>
<td>B</td>
<td>A</td>
</tr>
<tr style="text-align:center">
<td>A</td>
<td>B</td>
<td>C</td>
<td>B</td>
<td>A</td>
</tr>
</table>
CSS:
tr:hover
{
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}
有什么想法可以实现这个吗?
tr
呈渐变样式着色。 - Neretr
的背景设置为白色。我不确定这种方法对您有多大帮助。如果有用的话,我会添加为答案。 - Harry