使单元格在行悬停时可见

Question

我正在尝试使表格中的"actions“行仅在悬停时出现。当用户将鼠标悬停在表中的某一行上时，"actions“单元格(带有类"actions")才会在最右边弹出。

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;
}

不过这相当棘手--如果你使用单元格间距，tr:hover状态不会在单元格之间的空间中触发，这会导致.actions单元格消失。所以我的2美分-不要使用cellspacing (例如，将其设置为0)，您将很好:)