Table Row Box-Shadow on Hover (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，您应该结合伪类:first-child 和:last-child 设置td-元素的样式。预先添加 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/

更新：
Demo 2 没有插图（经典阴影）：http://jsfiddle.net/2nw4t/1/
Demo 3 没有插图（glow 效果）：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/

谢谢！！

Answer 3

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

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

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

Answer 4

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

将tr 设置为弹性盒

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 设置为一个 flexbox，允许它受到z-index 的影响，而不会破坏它在 DOM 中的位置。然后，您需要做的就是调整 tr:hover 伪元素的 z-index 并添加您的 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;
}

您可能需要使用align-items 调整td 元素在tr 弹性框中的大小和位置，因为我们不再使用tr 的默认display: table-row 属性。您可以使用align-items: center; 属性（见上文）垂直居中您的td 元素。然后你设置你的 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 5

这发生在我身上，我在上面设置了一些小的边界半径，它就可以了。

border-radius: 1px;

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

Answer 6

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 7

添加这个

tr {
    display: block;
}

出于某种原因，Webkit 需要明确知道该元素是块元素以显示框阴影。