Question

我有一张桌子，当您将鼠标悬停在一行上时，我想设置一些样式，因此我使用了box-shadow，并添加了相应的z-index来使其工作。问题是，当我将td设置为具有背景色时，它只是使其位于框阴影的顶部，因此悬停不起作用。

如何解决此问题，以便既可以在td元素中使用背景色，又可以在将鼠标悬停在一行上时使用盒阴影样式？

我在这个简单的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);
}

隐藏其他框阴影的背景色

1 个答案: