隐藏其他框阴影的背景颜色

Question

我有一张桌子，我想在你悬停一行时设置一些样式，所以我使用了box-shadow，并添加了相应的 z-index 来完成这项工作。问题是当我将tds 设置为具有背景颜色时，它只是使其位于盒子阴影的顶部，因此悬停不起作用。

我该如何解决这个问题，以便在 td 元素中同时使用背景颜色，并在悬停在一行上时使用 box-shadow 样式？

我在这个简单的 jsfiddle 中复制了它： https://jsfiddle.net/pjz43a52/

检查当您将鼠标悬停在一行上时，盒子阴影是否位于其他行的后面。如果您评论 td 背景颜色的行，它就可以工作：

table td {
  /* background-color: #EFEFEF; */
  z-index: 1;
}

任何想法为什么会发生这种情况？

Answer 1

这是因为td 是tr 的子代。当您的 CSS 将 tr 设置为在悬停时具有比 td 更高的 z-index 时，它将呈现在周围单元格的上方，因此您可以看到投射在其邻居身上的阴影。但是，不能对自己的孩子 td 投下任何阴影，因为他们也是与父母一起长大的。

您需要将父行设置为显示在其自己的子行之上。实现此目的的一种方法是将 td z-index 设置为 -1 并从 tr 中删除所有 z-index。这样做确实会使行的阴影显示在所有单元格的顶部，包括它自己的子单元格，但在 Chrome 和 Firefox 中，呈现效果很糟糕。

要使其正常工作，您还必须确保受 z-index 更改影响的每个元素都将其position 属性设置为非静态。

table tr {
  position: relative;
}

table td {
  position:relative;
  background-color: #EFEFEF;
  z-index: -1;
}

table tr:hover {
  position: relative;
  box-shadow: 
    inset 5px 0 0 #dadce0, 
    inset -3px 0 0 #dadce0, 
    0 5px 2px 0 rgba(60,64,67,.3), 
    0 5px 3px 1px rgba(60,64,67,.15);
}