表格行 - 阴影悬浮(Webkit)

Question

这可能吗？

我的代码适用于Firefox.我还可以让webkit在悬停时更改其他属性(例如背景颜色等),但是框阴影不会生效:

tr:hover {
    -webkit-box-shadow: 0px 2px 4px #e06547;
    -moz-box-shadow: 0px 2px 4px #e06547;
    box-shadow: 0px 2px 4px #e06547;
    background-color: #d4d5d6;
}

Answer 1

由于在这里找到答案:/sf/answers/770145421/而不是造型tr,你应该在样式td组合-元素与伪类:first-child和:last-child.预先支持tr:hover将为您解决问题:

tr:hover td {
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:first-child {
    -moz-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:last-child {
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}

带插图的演示1:http://jsfiddle.net/Kk6Th/

更新:没有插入的
演示2(经典阴影):http://jsfiddle.net/2nw4t/1/没有插入的
演示3(发光效果):http://jsfiddle.net/2CSuM/

Answer 2

使用带有 box-shadow 的transform scale(1,1)属性可以解决问题。

tr:hover {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

小提琴：https : //jsfiddle.net/ampicx/5p91xr48/

谢谢！！