如何使用 CSS 取消隐藏表格的一行？答案

【问题标题】：How do I unhide a row of a table using CSS?如何使用 CSS 取消隐藏表格的一行？
【发布时间】：2014-10-01 08:06:44
【问题描述】：

我有一个表格元素，里面有 tbody 和几个 tr 元素。默认情况下，使用 display:none 隐藏其中一个 tr 元素（行），我不使用 visibility:hidden 函数，因为留下的空间不会以这种方式折叠。到目前为止它有效，现在我想要的是让行重新出现取决于使用 CSS 的操作，例如 :hover 或 :active 。但是，当我根据此类操作更改行的显示条件时，行确实会扩展，但是，它仅显示空白。当我更改 tr 元素内 (td div div) 的宽度时，行的单元格确实会重新出现，因为在使用 display:none 后这些单元格的宽度等于零。我似乎无法根据使用 CSS 的操作更改单元格的宽度（例如，我可以更改此元素的背景颜色）。所以我的问题是，我该如何解决这个问题？我只能使用 HTML 或 CSS。

【问题讨论】：

你有任何代码示例或者可能在 jsfiddle 上发布一个吗？

标签： html css html-table row hide

【解决方案1】：

您不能显示基于div:hover 的tr。

您必须通过 JavaScript 执行此操作

如果你使用`jQuery`

var mytr = $("#mytr");
$("#mydiv").hover(function() {
    mytr.css("display", "initial")
});

如果你不这样做

您不能在原生 JavaScript 中放置 onhover 侦听器。但是，您可以使用 onmouseenter 显示元素，并使用 onmouseleave 再次隐藏它

var mytr = document.getElementById("mytr");
var mydiv = document.getElementById("mydiv");

mydiv.onmouseenter = function() {
    mytr.style.display = "initial";
}

mydiv.onmouseleave = function() {
    mytr.style.display = "none";
}

【讨论】：

这基本上适用于任何东西，不仅仅是tr和div，你可以使用这些方法来隐藏/取消隐藏不相关的东西

【解决方案2】：

:hover 或 :active 不是动作而是状态，或者准确地说是伪类。并且由于您通过 display:none 使元素不显示，因此它们不能悬停（您不能悬停不存在的东西）或激活（除非您通过 JS 等激活它）。您可以玩弄的是通过将父级悬停来使子级可见，但它被认为是一个相当肮脏的解决方案，并且不太可能达到预期的效果，因为它不会像我猜你正在尝试做的那样改变 DOM。

【讨论】：

感谢您的快速回复！我想我没有足够清楚地说明我的问题。我的意思是我想单击另一行实际上是可见的。也就是说，我想将可见的第 2 行悬停以取消隐藏默认不可见的第 3 行。我已使用以下命令访问行： .... tr:nth-child(2):active~tr:nth-child(3)。
啊，是的，在这种情况下当然是可能的。如果您在下一个问题中添加一些代码，那就太好了，这样会更清楚问题到底是什么，人们可以更有效地帮助您。 :)
这是一个 JSfiddle。它在这里工作，但是，在我使用它的环境中，带有类的 div 的宽度：“comp cx-simple_value”跳到零。我无法使用与取消隐藏行相同的代码来调整这些 div 的宽度。我希望从这里可以清楚。 jsfiddle.net/on2hLsuw/1谢谢！

如果你使用jQuery

如果你不这样做

如果你使用`jQuery`