[英]Table tr background gradient on hover using CSS
My requirement: 我的要求:
On tr
hover, tr
will have the linear gradient background, not only a flat background color . 在
tr
悬停时, tr
将具有线性渐变背景, 而不仅仅是平坦的背景颜色 。
Sample td
in tr
: tr
样本td
:
A | B | C | B | A
Where A darker --> C lighter
哪里
A darker --> C lighter
JSFIDDLE: 的jsfiddle:
https://jsfiddle.net/g7o84j43/ https://jsfiddle.net/g7o84j43/
Code I've tried: 代码我尝试过:
HTML: 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: 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) */
}
Any ideas how to achieve this? 任何想法如何实现这一目标?
The simplest and most straight-forward solution to setting a gradient background for tr
on hover
is to add background-attachment: fixed
also to it. 在
hover
为tr
设置渐变背景的最简单和最直接的解决方案是添加background-attachment: fixed
也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; }
<!-- prefix library included only to avoid vendor prefixes --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <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>
Here is a different approach for adding a gradient background to the row ( tr
) while hovering over it. 这是一种不同的方法,用于在将
tr
悬停在行( tr
)上时向其添加渐变背景。 In this approach, we add the gradient as a background to the table
element itself and then override it for the unhovered state to a solid color (white). 在这种方法中,我们将渐变作为背景添加到
table
元素本身,然后将未覆盖状态覆盖为纯色(白色)。 When the tr
is hovered, the background of the tr
is set to transparent
and so the table
background shows through revealing the gradient. 当
tr
悬停,所述的背景tr
被设置为transparent
,因此在table
背景示出了通过揭示梯度。
table { background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); } tr { background: white; } tr:hover { background: transparent; }
<!-- prefix library included only to avoid vendor prefixes --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <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>
If the lighter color needs to be at the center then the gradient can be modified like in the below snippet: 如果较浅的颜色需要位于中心,则可以修改渐变,如下面的代码段所示:
table { background: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); } tr { background: white; } tr:hover { background: transparent; }
<!-- prefix library included only to avoid vendor prefixes --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <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>
Maybe not the best solution, but maybe good enough for you, and it's working in Chrome too. 也许不是最好的解决方案,但也许对你来说足够好,而且它也在Chrome中运行。 DEMO
DEMO
HTML: HTML:
<div class="table-wrapper">
<table>
...
</table>
</div>
CSS: 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) */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.