表格行 - 阴影悬浮（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

在这里回答：https://stackoverflow.com/a/11002077/1106393而不是样式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

我遇到了这个问题，我找到了一些解决方法：

1. 在所有td上添加阴影。
2. 在display: block上设置tr。
3. 使用样式正确td:first-child:before。
4. 为所有td添加阴影，并涵盖我们不需要的部分。

你可以在这个jsFiddle上查看它们： https://jsfiddle.net/maskl/cxscmvpr/3/

Answer 3

最近，我在处理类似问题时遇到了这篇文章。我想我发现了另一种方法，可以在CSS中的display: flex;元素上使用position: relative;和tr属性，而标记却少得多（小的td样式和较少的psuedo样式）：

将tr设置为flexbox

tr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    align-items: center; /* Vertically aligns td's inside the tr */        
}

这会将TR设置为弹性框，使其不受z-index的影响而不会破坏其在DOM中的位置。然后，您需要调整z-index伪元素的tr:hover并添加background-color和box-shadow效果：

设置:hover效果

tr:hover {
    z-index: 1 /* or higher if necessary */
    -webkit-box-shadow: 0px 2px 4px #e06547;
    -moz-box-shadow: 0px 2px 4px #e06547;
    box-shadow: 0px 2px 4px #e06547;
    background-color: #d4d5d6;
}

您可能需要使用td来调整tr弹性框内align-items元素的大小和位置，因为我们不再使用tr的默认display: table-row属性。您可以使用thr td属性（请参见上文）将align-items: center;元素垂直居中。然后设置您的td宽度

td {
    width: 10em;
}

在这里查看有效的小提琴：https://jsfiddle.net/t68b9cwd/6/

此解决方案相当通用，现代的浏览器无需前缀即可处理此问题，但它们可能是较旧的浏览器实例，您可能需要执行变通方法（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox），类似于Google在Gmail中设置行样式的方式。

Answer 4

这件事发生在我身上，我在它上面放了一些小的边界半径，它起作用了。

border-radius: 1px;

根据您想要实现的外观，它可能是您可以使用的黑客。

Answer 5

AvL的解决方案非常好，谢谢您的提示。虽然如果像我一样你想要整个 tr 中的box-shadow (inset)，而不仅仅是一方，这段代码可以帮助你：

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

Answer 6

将变换 scale（1,1）属性与box-shadow一起使用可以解决问题。

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/

谢谢！

Answer 7

添加此

tr {
    display: block;
}

出于某种原因，Webkit需要明确知道该元素是一个显示盒子阴影的块元素。