Overlay on table cell on hover of first cell - html

Question

I have create a table listing. When user hover the first cell that is with 3 dots Edit and Delete option are displayed and below that there is a transparent background.
Everything is fine when content is in single line.
Issue is when there is more content. The height of overlay does not adjust. I have tried top: 0; bottom: 0; height: 100% to the .action it covers the whole table.
body {
margin: 0
}
.table {
display: table;
width: 100%;
border-bottom: 1px solid #ccc
}
.tHead,
.tRow {
display: table-row;
position: relative;
}
.tCell {
display: table-cell;
padding: 5px;
background: #fff;
border-top: 1px solid #ccc;
}
.tHead .tCell {
background: #ccc;
}
.tRow:hover .tCell {
background: #f4f4f4;
border-color: #000;
}
.tRow:hover + .tRow .tCell {
border-color: #000;
}
.tRow .tCell:first-child {
width: 10px;
cursor: pointer;
opacity: 1
}
.menu {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: relative;
margin-left: 5px;
top: 3px;
z-index: 2;
}
.menu:before,
.menu:after {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: absolute;
content: " ";
top: -6px;
}
.menu:before {
top: -12px;
}
.actions {
display: none;
position: absolute;
white-space: nowrap;
z-index: 1;
left: 0;
right: 0;
margin-top: -19px;
background: rgba(255, 255, 255, 0.9);
padding: 5px 5px 5px 28px;
}
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
background: #000
}
.tCell:hover .actions {
display: block
}
<div class="table">
<div class="tHead">
<div class="tCell"></div>
<div class="tCell">Name</div>
<div class="tCell">Age</div>
<div class="tCell">Gender</div>
<div class="tCell">Job Profile</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">Kelly</div>
<div class="tCell">28</div>
<div class="tCell">Female</div>
<div class="tCell">Web Developer</div>
</div>
<div class="tRow hovered">
<div class="tCell"><span class="menu"></span>
<span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">Jack
</div>
<div class="tCell">32</div>
<div class="tCell">Male</div>
<div class="tCell">Java Developer</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">
Janaya
</div>
<div class="tCell">26</div>
<div class="tCell">Female</div>
<div class="tCell">.Net Developer</div>
</div>
<div class="tRow ">
<div class="tCell"><span class="menu"></span><span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">Jim</div>
<div class="tCell">24</div>
<div class="tCell">Male</div>
<div class="tCell">Full Stack Developer</div>
</div>
</div>

Answer 1

Hope this helps you.
Use :before for the overlay on the cell and target the cells using ~ operator. I had same requirement. This is how I handled it.
body {
margin: 0
}
.table {
display: table;
width: 100%;
}
.tHead,
.tRow {
display: table-row;
position: relative;
}
.tCell {
display: table-cell;
padding: 5px;
background: #fff;
border-top: 1px solid #ccc;
position: relative
}
.tRow:last-child .tCell {
border-bottom: 1px solid #ccc;
}
.tHead .tCell {
background: #ccc;
}
.tRow:hover .tCell {
background: #f4f4f4;
border-color: #000;
}
.tRow .tCell:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.9);
top: 0;
left: 0;
display: none;
}
.tRow:hover + .tRow .tCell {
border-color: #000;
}
.tRow .tCell:first-child {
width: 10px;
cursor: pointer;
opacity: 1
}
.menu {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: relative;
margin-left: 5px;
top: 3px;
z-index: 3;
}
.menu:before,
.menu:after {
display: block;
height: 3px;
width: 3px;
background: #ccc;
position: absolute;
content: " ";
top: -6px;
}
.menu:before {
top: -12px;
}
.actions {
display: none;
position: absolute;
white-space: nowrap;
z-index: 4;
left: 0;
right: 0;
margin-top: -19px;
padding: 5px 5px 5px 28px;
}
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
background: #000
}
.tCell:hover .actions {
display: block
}
.tRow:hover .tCell:first-child:hover:before,
.tRow:hover .tCell:first-child:hover ~ .tCell:before {
display: block;
}
<div class="table">
<div class="tHead">
<div class="tCell"></div>
<div class="tCell">Name</div>
<div class="tCell">Age</div>
<div class="tCell">Gender</div>
<div class="tCell">Job Profile</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">Kelly</div>
<div class="tCell">28</div>
<div class="tCell">Female</div>
<div class="tCell">Web Developer</div>
</div>
<div class="tRow hovered">
<div class="tCell"><span class="menu"></span>
<span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">Jack
</div>
<div class="tCell">32</div>
<div class="tCell">Male</div>
<div class="tCell">Java Developer</div>
</div>
<div class="tRow">
<div class="tCell"><span class="menu"></span><span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">
Janaya
</div>
<div class="tCell">26</div>
<div class="tCell">Female</div>
<div class="tCell">.Net Developer</div>
</div>
<div class="tRow ">
<div class="tCell"><span class="menu"></span><span class="actions">
Edit |
Delete
</span>
</div>
<div class="tCell">Jim</div>
<div class="tCell">24</div>
<div class="tCell">Male</div>
<div class="tCell">Full Stack Developer</div>
</div>
</div>

Answer 2

#Tushar .. I noticed that the bottom line of the table, the div border never gets updated on the hover.. fiddle example
.tCell:hover .menu:before,
.tCell:hover .menu:after,
.tCell:hover .menu {
background: #000;
}