0

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

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

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

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

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

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

4

1 回答 1

1

发生这种情况是因为td是tr. 当您的 CSS 设置tr为具有比td悬停时更高的 z-index 时，它将呈现在周围单元格的上方，以便您可以看到投射在其邻居上的阴影。然而，不能给自己的孩子蒙上阴影，td因为他们也是与父母一起长大的。

您需要将父行设置为显示在其自己的子行之上。实现此目的的一种方法是将tdz-index 设置为 -1 并从tr. 这样做确实会使行的阴影显示在所有单元格的顶部，包括它自己的子单元格，但是在 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);
}
于 2018-10-05T03:35:04.237 回答