Question

我试图让表格中的“行动”行仅在悬停时显示。当用户将鼠标悬停在表格中的一行上时;只有这样，“动作”单元格（带有“动作”类）才会在最右边弹出。

的application.js

$(document).ready(function(){
    $(".generic_table > tbody > tr").hover(function(){
        $("this>td.actions").css("visibility", "visible");
    });
});

generic_table.css

.generic_table > tbody > tr > td > a:hover
{
    background-color: #721314;
    color: white;
}

.generic_table > thead > tr > th.actions
{
    background-color: white;
    color:black;
    visibility: hidden;
}

.generic_table > tbody > tr > td.actions
{
    background-color: white;
    color:black;
    visibility: hidden;
}

我想将该单元格在其特定行上“可见”。我用“this”来选择行;在那个级别我做了一些CSS操作，它没问题;但当我接触到孩子“td.actions”时;这是行不通的。我该怎么办才能让它可见？我的选择器有问题吗？

Answer 1

我认为这里不需要jQuery。仅CSS解决方案：

.generic_table > thead > tr:hover > th.actions {
    visibility:visible;
}

.generic_table > tbody > tr:hover > td.actions {
    visibility:visible;
}

虽然这很棘手 - 如果你使用cellspacing，tr：hover状态不会在单元格之间的空间中触发，这会导致.actions单元格消失。所以我的2美分 - 不使用cellspacing（即设置为0），你会没事的。）

在行悬停时使单元格可见

1 个答案: