使用CSS悬停时的表格tr背景渐变 [英] Table tr background gradient on hover using CSS
本文介绍了使用CSS悬停时的表格tr背景渐变的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的要求:
在tr
悬停时,tr
将具有线性渐变背景,不仅是平坦的背景颜色.
On tr
hover, tr
will have the linear gradient background, not only a flat background color.
tr
中的示例td
:
A | B | C | B | A
A darker --> C lighter
JSFIDDLE:
https://jsfiddle.net/g7o84j43/
我尝试过的代码:
Code I've tried:
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) */
}
有什么想法可以实现这一目标吗?
Any ideas how to achieve this?
推荐答案
也许不是最好的解决方案,但可能对您来说足够好,它也可以在Chrome浏览器中使用. 演示
Maybe not the best solution, but maybe good enough for you, and it's working in Chrome too. 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, 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) */
}
这篇关于使用CSS悬停时的表格tr背景渐变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文