Question

我试图制作一种tr悬停样式，以将框阴影效果应用于要悬停的行，并且我发现，如果将表放在一个具有背景色。显然，这是因为td具有var authenticationMock = new Mock<IYTAuthentication>(); // no arguments authenticationMock.Setup(p => p.ApiKey).Returns("123_c"); var service = new ServiceToTest(authenticationMock.Object); var data = service.GetData(); Assert.Equal("expected data", data);，但这是我发现使盒子阴影起作用的唯一方法。

有什么想法可以使表格出现并在悬停时保持盒子阴影样式？

我在这里复制了它： https://jsfiddle.net/pjz43a52/5/

Answer 1

我认为您想设置悬停时显示td，对吧？只需再增加一行，将鼠标悬停时将z-index重置为大于0。

表tr：hover {z-index：1; }

Answer 2

给表本身一个z索引，以在表和div之间创建一个额外的“层”，z索引为负的表单元格可以驻留在其中，这样它就不会隐藏在div背景。

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

https://jsfiddle.net/pjz43a52/6/

Answer 3

这是因为tds的z-index为-1，因此它们在容器div之下呈现。

要解决此问题，我们应同时给容器div和<table>元素position: relative，并设置.container以使z-index: 0和<table>具有一个z-index: 1。

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

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

3 个答案: