Gradiente de fondo de tabla tr en hover usando CSS

Mi requerimiento:

En tr fl, tr tendrá el fondo degradado lineal, no solo un color de fondo plano .

Muestra td en tr :

 A | B | C | B | A 

Donde A darker --> C lighter

JSFIDDLE:

https://jsfiddle.net/g7o84j43/

Código que he intentado:

HTML:

 
A B C B A
A B C B A

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) */ } 

¿Alguna idea de cómo lograr esto?

Tal vez no sea la mejor solución, pero tal vez lo suficientemente buena para ti, y también está funcionando en Chrome. MANIFESTACIÓN

HTML:

 
...

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, 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) */ } 

La solución más simple y directa para establecer un fondo degradado para tr en hover es agregar background-attachment: fixed también se le ha background-attachment: fixed .

 tr:hover { background: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); background-attachment: fixed; } 
   
A B C B A
A B C B A