我的要求:
在tr
悬停时,tr
将具有线性渐变背景,而不仅仅是平坦的背景颜色。
tr
:中的样本td
A | B | C | B | A
其中A darker --> C lighter
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) */
}
有什么想法可以实现吗?
在hover
上为tr
设置梯度背景的最简单、最直接的解决方案是将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>
这里有一种不同的方法,用于在悬停在行(tr
)上时向其添加渐变背景。在这种方法中,我们将渐变作为背景添加到table
元素本身,然后将其覆盖为纯色(白色)的未覆盖状态。当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>
如果较浅的颜色需要在中心,那么可以像下面的片段一样修改渐变:
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>
也许不是最好的解决方案,但可能对您来说已经足够好了,而且它也可以在Chrome中使用演示
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, 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) */
}