表格行上的CSS框阴影未正确显示

我已经在表行上添加了一个轻微的框阴影，当它被悬停时，这样它会更明显一些。它正常工作，但当我添加交替行颜色时，它将停止正确显示

如您所见，框阴影在使用alt类将鼠标悬停在颜色较深的行上方时会显示，但对于颜色较浅的行，它只在行的顶部显示阴影，而不在底部显示阴影。从第2行和第4行删除alt类可以修复它，但代价是交替行颜色。是什么导致了这种行为，我如何修复它？

似乎不能像您希望的那样更改a的z索引，以便阴影显示在具有背景色的行上方

这是不完美的，但是您可以像当前一样在元素上设置BG颜色，然后像这样在内部元素上设置悬停框阴影

.搜索表tbody tr:hover td{ 盒影：0px 0px 3px 0px 000000 82； } 这并不完美，因为单元之间的内部水平边界也会获得阴影，但是可以设置每个单元的自定义阴影大小/位置并应用这些阴影

另一种选择可能是保留现有内容并在屏幕上使用插入阴影，如下所示：

.搜索表tbody tr:悬停{ 框阴影：插入0px 0px 3px 0px 000000 82； } 最后一个复杂的解决方案可能是使用一些JS来移动一个透明的元素，周围有阴影，并在悬停每个单元格时正确定位和调整大小

或者。。。我所能做的就是改变悬停行的背景颜色，忘记阴影

似乎不能像您希望的那样更改a的z索引，以便阴影显示在具有背景色的行上方

这是不完美的，但是您可以像当前一样在元素上设置BG颜色，然后像这样在内部元素上设置悬停框阴影

.搜索表tbody tr:hover td{ 盒影：0px 0px 3px 0px 000000 82； } 这并不完美，因为单元之间的内部水平边界也会获得阴影，但是可以设置每个单元的自定义阴影大小/位置并应用这些阴影

另一种选择可能是保留现有内容并在屏幕上使用插入阴影，如下所示：

.搜索表tbody tr:悬停{ 框阴影：插入0px 0px 3px 0px 000000 82； } 最后一个复杂的解决方案可能是使用一些JS来移动一个透明的元素，周围有阴影，并在悬停每个单元格时正确定位和调整大小

---

或者。。。我所能做的就是改变悬停行的背景颜色，忘记阴影

您可以通过将transform:scale1应用于悬停行，解决其他表行隐藏框阴影的问题：

.search-table table tbody tr:hover {
    box-shadow: 0px 0px 3px 0px #00000082;
    transform: scale(1);
}

---

通过将transform:scale1应用于悬停行，可以解决其他表行隐藏框阴影的问题：

.search-table table tbody tr:hover {
    box-shadow: 0px 0px 3px 0px #00000082;
    transform: scale(1);
}

---

仅供参考，您可以使用tr:nth childeven CSS选择器，而不是将.alt类添加到其他每一个表行中！仅供参考，您可以使用tr:nth childeven CSS选择器，而不是将.alt类添加到其他每一个表行中！很简单，很有魅力。我认为这应该是最受欢迎的答案。在Mac的Safari上不起作用。简单而且很有魅力。我认为这应该是投票最多的答案。在Safari for Mac上不起作用。