CODEWITHSUNDEEP
javascriptjquerycsshtml-tablestyling
james
james

Reputation: 525

Making a cell visible on row hover

I am trying to make the "actions" row in a table appear upon hover only. When the user hovers over a row in the table; it is only then the "actions" cell (with class "actions") pops up at the farthest right.

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

I want to turn that cell "visible" on its particular row. I used "this" to select the row; on that level I did some CSS manipulations and it went ok; but when I got down to the child "td.actions"; it does not work. What should I do to make it visible? Is there something wrong with my selector?

Upvotes: 0

Views: 1126

Answers (1)

Huuuda
Huuuda

Reputation: 21

No need for jQuery here I think. CSS only solution:

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

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

It's quite tricky though - if you use cellspacing, the tr:hover state does not trigger in the space between cells, which causes the .actions cell disappear. So my 2 cents - don't use cellspacing (i.e. set it to 0) and you'll be fine :)

Upvotes: 2

Related Questions