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

Question

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

我该如何解决这个问题，这样我既可以在 td 元素中使用背景颜色，又可以在悬停在一行上时使用框阴影样式？

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

检查当您将鼠标悬停在一行上时，框阴影是否位于其他行的后面。如果您注释 td 背景颜色的行，它就有效：

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

知道为什么会发生这种情况吗？

Answer 1

发生这种情况是因为 td 是 tr 的 child。当您的 CSS 将 tr 设置为比悬停时 td 更高的 z-index 时，它将呈现在周围的单元格上方，因此您可以看到投射在其邻居上的阴影。但是，不能单独投射阴影 child td，因为它们也会随着 parent.

升高。

您需要将 parent 行设置为显示在其 children 之上。实现此目的的一种方法是将 td z-index 设置为 -1 并从 tr 中删除所有 z-indexes。这样做确实会使该行的阴影显示在所有单元格之上，包括它自己的 children，但在 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);
}

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

Background color hiding other box-shadow

html

css

z-index

box-shadow