使用CSS实现表格行背景渐变色效果的悬停状态

Question

我的要求：

当鼠标悬停在 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) */
}

有什么想法可以实现这个吗？

- Nere

---

是的，那很好...但在谷歌浏览器上怎么样？很多用户使用谷歌浏览器。 - Nere

不是重复的 @divy3993... 我需要整个 tr 呈渐变样式着色。 - Nere

这里是另一种解决方案，不使用额外的元素或定位等。它将渐变设置为表格的背景，在悬停时显示。当未悬停时，tr 的背景设置为白色。我不确定这种方法对您有多大帮助。如果有用的话，我会添加为答案。 - Harry

好的，不错的解决方案...你可以将其添加为答案。 - Nere

关闭投票者，请注意，这个问题绝不是和目前四个CV链接的那个问题的重复。那个解决方案仅适用于纯色，而这个问题是关于渐变的。 - Harry

Answer 1

在鼠标悬停时为设置渐变背景的最简单、最直接的解决方案是同时添加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>

- Harry

---

感谢您的回答。 - Nere

@Imran：添加悬停渐变背景到'tr'的更简单方法似乎存在。 只需要添加“background-attachment：fixed”即可。 当你有时间时，请查看答案中的第一个片段 :) - Harry

第一个示例只有在表格宽度设置为100％时才能正常工作...不过，我已经点赞了 :) - Asons

Answer 2

也许不是最好的解决方案，但对你来说可能已经足够了，而且在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) */
}

- lmgonzalves

---

差点就好了...你能把它居中吗？ - Nere

居中对齐，你能再解释一下吗？ - lmgonzalves

感谢您的帮助。 - Nere

我很高兴能帮助你 :) - lmgonzalves