When assigning a background color of a table cell on hover, the box shadow is covered.
I have found several questions asking something similar, and my understanding is this is correct behavior: background colors do overlay box shadows.
However, I have seen several answers on here using a "mask" (new element) or :before
and :after
. The "mask" solution won't work for me as I cannot edit the HTML.
I first tried using borders instead of box shadows, but that moved the rows up and down due to varying heights.
Is this possible? Row should highlight on hover, cell should highlight a different color on hover, row should have 4px border on hover but cells should not shift up/down on hover.
table {
border-collapse: collapse;
}
table tr:hover {
box-shadow: inset 0px 0px 0px 4px blue;
background: red;
}
table tr td {
border: 1px solid black;
padding: 5px;
}
table tr td:hover {
background: yellow;
}
table tr td:hover::before {
content: '';
display: block;
box-shadow: inset 0 0 0 4px blue;
position: relative;
top: -5px;
height: 4px;
}
table tr td:hover::after {
content: '';
display: block;
box-shadow: inset 0 0 0 4px blue;
position: relative;
bottom: -5px;
height: 4px;
}
<table>
<tbody>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
</tr>
</tbody>
</table>
JS Fiddle: https://jsfiddle.net/jennifergoncalves/guqtj4y0/26/