我的要求：
在tr hover上,trwill具有线性渐变背景,而不仅仅是平坦的背景颜色.
tr中的样本td：
A | B | C | B | 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),1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right,1)); /* Standard Syntax (must be last) */
}
任何想法如何实现这一目标？
解决方法
也许不是最好的解决方案,但也许对你来说足够好,而且它也在Chrome中运行.
DEMO
HTML：
<div class="table-wrapper">
<table>
...
</table>
</div>
CSS：
/* To hide the overflow */
.table-wrapper{
position: relative;
overflow: hidden;
}
tr{
position: relative;
}
/* Making the background with :before pseudo-element */
tr:before
{
position: absolute;
content: "";
width: 100%;
height: 20px;
z-index: -1;
}
tr:hover:before
{
background: -webkit-linear-gradient(left,1)); /* Standard Syntax (must be last) */
}
