代码之家 › 专栏 › 技术社区 › Pablo Matias Gomez

带有背景色的容器div隐藏表单元格

box-shadow z-index css3 css html

0

Pablo Matias Gomez · 技术社区 · 7 年前

我试着制作一个tr hover样式,对你正在悬停的行应用一个框阴影效果,我发现如果我把表放在一个有背景色的div中,我的解决方案就不起作用了。这显然是因为td拥有 z-index : -1 ,但这是我发现的唯一让盒子阴影工作的方法。

你知道如何使表格显示出来,并在悬停时保持方框阴影样式吗?

3 回复 | 直到 7 年前

1

0

VincentNg 7 年前

我想你应该在悬停时设置td的显示,对吧? 只需再添加一行,在悬停时将z索引重置为大于0。

2

0

misorude 7 年前

为表本身指定一个z索引,以便在表和div之间创建一个附加层,具有负z索引的表单元可以驻留其中,这样它就不会隐藏在div背景后面。

table {
  position: relative;
  z-index: 1;
  border-spacing: 0px;
  border-bottom: 1px solid black;
}

3

0

Pablo Matias Gomez 7 年前

为了解决这个问题,我们应该同时给出container div和 <table> 要素 position: relative ,并设置 .container 拥有 z-index: 0 和 <表> 有一个 z-index: 1

这些z索引将强制表及其子级在容器上方呈现。 td的索引仍将位于行的下方,但它现在将显示在容器的上方。