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

Question

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

Answer 1

您无法基于

tr

显示

div:hover

。

您必须通过 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";
}

Answer 2

:hover

或

:active

不是动作，而是状态，或者准确地说是

pseudo-classes

。而且由于您通过

display:none

使元素不显示，因此它们无法悬停（您无法悬停不存在的东西）或激活（除非您通过 JS 等激活它）。

您可以尝试的是，通过将鼠标悬停在父级上，使子级可见。但它被认为是一个相当肮脏的解决方案，并且不太可能达到预期的效果，因为它不会改变 DOM，我猜你正在尝试做的事情。