如何使用CSS取消隐藏表中的一行?

tyky79it  于 5个月前  发布在  其他
关注(0)|答案(2)|浏览(98)

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

ux6nzvsh

ux6nzvsh1#

你不能显示基于div:hovertr
你必须通过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";
}

wbgh16ku

wbgh16ku2#

:hover:active不是动作,而是状态,或者确切地说是pseudo-classes。由于您通过display:none使元素不显示,因此它们不能悬停(您不能悬停不存在的东西)或激活(除非您通过JS等激活它)。
你可以玩的是,通过悬停父对象来使子对象可见。但它被认为是一个相当肮脏的解决方案,不太可能达到预期的效果,因为它不会改变DOM,我猜你正在尝试做的事情。

相关问题